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

How to enable multiple element with checkbox

本文关键字：元素 启用 何使用 复选框      更新时间：2023-09-26

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

我编写了一个简单的脚本，说明您正在努力实现的目标。

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

我猜您的问题是"它不起作用"，也就是说，元素没有被禁用。这在一定程度上是因为您使用getElementById来访问没有ID属性的元素（尽管它很可能在IE中工作，因为它认为ID和名称是一样的）。

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

编辑

你的代码中有几个错误和遗漏：

  1. checked属性没有值，它是一个布尔属性，其存在表示"true"，不存在表示"false"，因此…checked="false"…为true并选中复选框
  2. 有两个名称为*text_no1的输入*
  3. 似乎选中复选框应该启用控件，标签应该表明这一点
  4. 使用表单使访问表单控件变得更容易

一些工作代码：

<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>
相关文章：