How to cut input of HTML form?

Question

What is the best way to gray text in HTML form? I need the inputs to be grayed out when the user has checked the box. Should I use JavaScript for this (not very familiar with JavaScript), or can I use PHP (with which I am more familiar)?

EDIT:

After some reading, I have some code, but this gives me problems. For some reason, I cannot get my script to work based on the input state of the form (enabled or disabled) or the state of my checkbox (checked or not checked), but my script works fine when I base it on the input values ​​of the form. I wrote my code just like a few examples on the Internet (mainly this one ), but to no avail. None of the materials that are commented will work. What am I doing wrong here?

<label>Mailing address same as residental address</label>
<input name="checkbox" onclick="disable_enable()" type="checkbox" style="width:15px"/><br/><br/>

<script type="text/javascript">

    function disable_enable(){

        if (document.form.mail_street_address.value==1)
            document.form.mail_street_address.value=0;
            //document.form.mail_street_address.disabled=true;
            //document.form.mail_city.disabled=true;
            //document.form.mail_state.disabled=true;
            //document.form.mail_zip.disabled=true;

        else
            document.form.mail_street_address.value=1;
            //document.form.mail_street.disabled=false;
            //document.form.mail_city.disabled=false;
            //document.form.mail_state.disabled=false;
            //document.form.mail_zip.disabled=false;

    }

</script>

EDIT:

Here is the updated code based on what @ Chief17 suggested. The best I can say is none of this works. I use valueas a test because it works for some reason

            <label>Mailing address same as residental address</label>
        <input name="checkbox" onclick="disable_enable()" type="checkbox" style="width:15px"/><br/><br/>

        <script type="text/javascript">

            function disable_enable(){

                if (document.getElementById("mail_street_address").getAttribute("disabled")=="disabled")
                    document.form.mail_street_address.value=0;
                    //document.getElementById("mail_street_address").removeAttribute("disabled");
                    //document.getElementById("mail_city").removeAttribute("disabled");
                    //document.getElementById("mail_state").removeAttribute("disabled");
                    //document.getElementById("mail_zip").removeAttribute("disabled");

                else
                    document.form.mail_street_address.value=1;
                    //document.getElementById("mail_street_address").setAttribute("disabled","disabled");
                    //document.getElementById("mail_city").setAttribute("disabled","disabled");
                    //document.getElementById("mail_state").setAttribute("disabled","disabled");
                    //document.getElementById("mail_zip").setAttribute("disabled","disabled");
            }

        </script>

Answer 1

, :

    <script type="text/javascript">

    function disable_enable()
    {
        if(document.getElementById("checkbox").checked != 1)
        {
            document.getElementById("input1").removeAttribute("disabled");
            document.getElementById("input2").removeAttribute("disabled");
            document.getElementById("input3").removeAttribute("disabled");
            document.getElementById("input4").removeAttribute("disabled");
        }
        else
        {
            document.getElementById("input1").setAttribute("disabled","disabled");
            document.getElementById("input2").setAttribute("disabled","disabled");
            document.getElementById("input3").setAttribute("disabled","disabled");
            document.getElementById("input4").setAttribute("disabled","disabled");
        }
    }

    </script>

    <label>Mailing address same as residental address</label>
    <input id="checkbox" onClick="disable_enable()" type="checkbox" style="width:15px"/><br/><br/>
    <input type="text" id="input1" />
    <input type="text" id="input2" />
    <input type="text" id="input3" />
    <input type="text" id="input4" />

Answer 2

, , JavaScript.

JavaScript readonly disabled. , , JavaScript ( , jQuery), "disabled".

, , .

Answer 3

, , , , ...

javascript: http://www.theredhead.nl/~kris/stackoverflow/enable-or-disable-input-based-on-checkbox.html

:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <title>Enable/disable input based on checkbox</title>
        <script type="text/javascript">
        // setup a bit of code to run after the document has loaded. (note that its set on window)
        window.addEventListener('load', function(){
            potential_checkboxes = document.getElementsByTagName('input');
            for(i = 0; i < potential_checkboxes.length; i ++) {
                element = potential_checkboxes[i];
                // see if we have a checkbox

                if (element.getAttribute('type') == 'checkbox') {
                    // initial setup
                    textbox = document.getElementById(element.getAttribute('rel'));
                    textbox.disabled = ! element.checked;

                    // add event handler to checkbox
                    element.addEventListener('change', function() {
                        // inside here, this refers to the checkbox that just got changed
                        textbox = document.getElementById(this.getAttribute('rel'));
                        // set disabled property of textbox to not checked property of this checkbox
                        textbox.disabled = ! this.checked;
                    }, false);
                }               
            }
        }, false);
        </script>
    </head>
    <body>
        <h1>Enable/disable input based on checkbox.</h1>

        <form>
            <label for="textbox_1">
                Textbox 1: 
                <input id="textbox_1" type="text" value="some value" />
            </label>
            <br />
            <input id=="checkbox_1" type="checkbox" rel="textbox_1" />
            <label for="checkbox_1">Enable textbox 1?</label>
            <hr />
        <form>
    </body>
</html>

Answer 4

- JavaScript .

, , JS, , , .