如何使 HTML 表单输入变灰？

Question

将 HTML 表单上的文本输入灰显的最佳方法是什么？当用户选中复选框时，我需要将输入灰显。我必须使用 JavaScript（对 JavaScript 不太熟悉）还是可以使用 PHP（我更熟悉）？

编辑：

经过一番阅读后，我得到了一些代码，但它给我带来了问题。由于某种原因，我无法让我的脚本根据表单输入的状态（启用或禁用）或复选框的状态（选中或未选中）工作，但是当我基于表单的值时，我的脚本工作正常输入。我编写的代码与网上的几个示例完全相同（主要是 这个），但没有有用。被注释掉的东西都不起作用。我在这里做错了什么？

<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>

编辑：

这是一些基于@Chief17建议的更新代码。我只能说这一切都不起作用。我使用 value 作为测试，因为它出于某种原因起作用

            <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

不幸的是，由于您是为了响应用户输入而执行此操作，而没有将表单发送回服务器，因此您必须通过 JavaScript 来执行此操作。

JavaScript 中的输入元素同时具有 readonly 和 disabled 属性。如果您希望它们完全禁用，则需要使用 JavaScript（或像 jQuery 这样的库）将禁用属性的值更改为“残疾人”。

请注意，提交表单时，禁用的输入不会将其值发送到服务器。

Answer 2

完全删除了我的其他帖子并替换为您应该需要的所有代码：

    <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 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，因此不会发生更改