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

我经历了一些通过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>

功能启用禁用（可启用、文本编号1、文本编号2、选项编号1、选项编号2）{
document.getElementById（text_no1）.disabled=！bEnable
document.getElementById（text_no2）.disabled=！bEnable
document.getElementById（opt_no1）.disabled=！bEnable
document.getElementById（opt_no2）.disabled=！bEnable
}
扳机






1.
1.

我猜您的问题是“它不工作”，也就是说，元素没有被禁用。这部分是因为您正在使用

getElementById

访问没有ID属性的元素（尽管它可能在IE中工作，因为它认为ID和名称是相同的）

您可以将name属性更改为ID属性（因为您没有使用不应该成为问题的表单），也可以保留名称并将控件放入表单中，然后作为表单的命名属性访问它们

编辑 您的代码中有几个错误和遗漏：

选中的属性没有值，它是一个布尔属性，其存在表示“true”，不存在表示“false”，因此

…checked=“false”…

为true并选中复选框

有两个输入名为*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>

功能启用禁用（el）{
var f=el.form；
var bEnable=已检查的el；
if（！f）return；//如果找不到表单则停止
对于（var i=1，iLen=arguments.length；i我编写了一个简单的脚本，说明您试图实现的目标

（在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"/>

禁用/启用



实时示例：
你对这段代码有什么问题？你有什么问题？你有我们可以看到的问题吗？我共享了代码。我没有问！如果元素比textbox多怎么办？我可以按ID列出其他行并使它们切换吗？例如，我放置document.getElementById（“textbox2”）.disabled=val document.getElementById（“select1”）.disabled=val等。是的，只要
元素
有效，您可以添加任意数量的元素，以切换为启用/禁用。这似乎与脚本无关。我仍然使用它，它工作正常。无论如何，感谢您的建议。它“工作正常”这只是偶然的，请参见上面的示例。它还显示了如何在单击复选框时包含任意数量的控件以启用或禁用。