Question

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

修改

经过一些阅读后，我得到了一些代码，但它给了我一些问题。由于某种原因，我无法根据表单输入的状态（启用或禁用）或复选框的状态（选中或取消选中）使我的脚本工作，但我的脚本在我基于表单的值时工作正常投入。我编写的代码与在线几个例子完全相同（主要是this one），但无济于事。没有被注释掉的东西都可以使用。我在这里做错了什么？

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

如何使HTML表单输入变灰？

4 个答案: