Question

我目前正在使用此功能，当您按下复选框时，下拉菜单（textbox_1）将被禁用。我的问题是，如何改进此代码以同样禁用textbox_2 ...

<html>
    <head>
        <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">
            <SELECT class="enteredYear" id="textbox_1" name=year>
            <OPTION selected value="">Year</OPTION>
            <OPTION value=2013>2014</OPTION>
            <OPTION value=2013>2013</OPTION>
            <OPTION value=2012>2012</OPTION>
            </SELECT>
            </label>
            <label for="textbox_2">
                Textbox 1: 
                <input id="textbox_2" type="text" value="some value" />
            </label>

            <br />
            <input id=="checkbox_1" type="checkbox" rel="textbox_1"/>
            <label for="checkbox_1">I have a classic car.</label>
            <hr />
        <form>
    </body>
</html>

Answer 1

使用textbox_2“抓住”document.getElementById('textbox_2')，并在更改事件侦听器中禁用该复选框。

// add event handler to checkbox
element.addEventListener('change', function() {
    // inside here, this refers to the checkbox that just got changed
    textbox = document.getElementById('textbox_1');

    // ---------------------------------------------
    // Grabs the textbox_2 element
    textbox2 = document.getElementById('textbox_2');
    // ---------------------------------------------

    // set disabled property of textbox to not checked property of this checkbox
    textbox.disabled = this.checked;

    // ------------------
    // Disables textbox_2
    // ------------------
    textbox2.disabled = this.checked;
}, false);

Answer 2

将CSS类名添加到要禁用和使用的元素：

var checks = document.getElementsByClassName('disableme')

“检查”将由包含这些元素的数组。循环，禁用。

Answer 3

element.addEventListener('change', function() {
  // inside here, this refers to the checkbox that just got changed
  textbox = document.getElementById(this.getAttribute('rel'));
  textbox.disabled = this.checked;
  textbox2 = document.getElementById('textbox_2');
  textbox2.disabled = this.checked;
}, false);

Answer 4

如果你想坚持使用类似的方法，你可以这样做：

<input id=="checkbox_1" type="checkbox" rel="textbox_1,textbox_2"/>

element.addEventListener('change', function() {
    var ids = this.getAttribute('rel').split(",");
    for(var i = 0; i < ids.length; i++) {
        textbox = document.getElementById(ids[i]);
        // set disabled property of textbox to not checked property of this checkbox
        textbox.disabled = this.checked;
    }
}, false);

JavaScript只需单击一下即可禁用两个输入

4 个答案: