Question

我经历了一些通过javascript启用/禁用多个html元素的代码：

<script type="text/javascript">
    function enableDisable(bEnable, text_no1, text_no2, opt_no1, opt_no2){
        document.getElementById(text_no1).disabled = !bEnable
        document.getElementById(text_no2).disabled = !bEnable
        document.getElementById(opt_no1).disabled = !bEnable
        document.getElementById(opt_no2).disabled = !bEnable
    }
</script>
<label for="toggler"><input type="checkbox" id="toggler" autocomplete="off"
 checked="false" 
 onclick="enableDisable(this.checked, 'text_no1','text_no2','opt_no1','opt_no2')";>
&nbsp;Toggler</label>
<br>
<input type="text" name="text_no1"><br>
<input type="text" name="text_no1"><br>
<select name="opt_no1">
  <option>1</option>
</select>
<select name="opt_no2">
  <option>1</option>
</select>

Answer 1

我猜你的问题是“它不起作用”，也就是说，元素没有被禁用。这部分是因为您使用getElementById来访问没有ID属性的元素（尽管它可能在IE中有效，因为它认为ID和名称是相同的。）

您可以将名称属性更改为ID属性（因为您没有使用不应该成为问题的表单），或保留名称并将控件放在表单中，然后将其作为命名属性访问形式。

修改

您的代码中存在一些错误和遗漏：

已检查属性没有值，它是一个布尔属性，其在线状态表示“true”，缺席为“false”，因此…checked="false"…为真并检查复选框。< / LI>
有两个输入，名称为* text_no1 *
似乎勾选复选框应该启用控件，标签应该表明。
使用表单可以更轻松地访问表单控件

一些有效的代码：

<script type="text/javascript">
    function enableDisable(el) {
      var f = el.form;
      var bEnable = el.checked;

      if (!f) return; // Stop if form not found

      for (var i=1, iLen=arguments.length; i<iLen; i++) {
        f[arguments[i]].disabled = !bEnable;
      }
    }
</script>

<form>
  <label for="toggler">
    <input type="checkbox" id="tggler" name="toggler" autocomplete="off" checked
     onclick="enableDisable(this, 'text_no1','text_no2','opt_no1','opt_no2')";>
     Controls enabled</label>
  <br>
  <input name="text_no1"><br>
  <input name="text_no2"><br>
  <select name="opt_no1">
    <option>1
  </select><br>
  <select name="opt_no2">
    <option>2
  </select>
</form>

Answer 2

我制作了一个简单的脚本，说明了你想要实现的目标。

（在Chrome 21，Firefox 14，Internet Explorer 9中测试）

JavaScript

function Switch() {
    var checkbox = document.getElementById("Switch")

    var val = checkbox.checked

    document.getElementById("textbox").disabled = val

}

HTML

<input type="checkbox" id="Switch" onChange="Switch()" />Disable/Enable
<br />
<input type="text" id="textbox"/>

直播示例：http://jsfiddle.net/jHVNE/1/

如何使用复选框启用多个元素

2 个答案:

修改