0

我目前正在使用此功能，当您按下复选框时，下拉菜单 (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>
4

4 回答 4

3

只需“抓住” textbox_2using 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);
于 2013-07-30T20:44:00.337 回答
1

为要禁用和使用的元素添加 CSS 类名称：

var checks = document.getElementsByClassName('disableme')

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

于 2013-07-30T20:43:44.630 回答
0

如果您想坚持使用类似的方法，可以执行以下操作：

<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);
于 2013-07-30T20:50:22.520 回答
0 
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);
于 2013-07-30T20:43:28.280 回答