使用复选框启用/禁用一组表单输入元素答案

【问题标题】：Enable/Disable group of form input elements with a checkbox使用复选框启用/禁用一组表单输入元素
【发布时间】：2017-12-22 06:36:54
【问题描述】：

我想要一个可以启用（选中时）或禁用（未选中时）一组输入表单元素的复选框。我已经设法只用一个元素来做到这一点，但我正在努力用几个元素来做到这一点。这是我的代码：

Javascript：

function myFunction() {

var elements = document.getElementsByClassName("child1");
var el = document.getElementById("myCheck");

for(var i=0; i<elements.length; i++) {

 if(el.checked) {
    elements[i].removeAttribute("disabled");
    } else {
    elements[i].setAttribute("disabled","disabled");
    }
}
}

HTML

<input type="checkbox" id="myCheck" onChange="myFunction()">Click the button to disable the form input elements<br>


<input type="radio" class="child1" name="group1" disabled="disabled">
<input type="radio" class="child1" name="group1" disabled="disabled">
<input type="radio" class="child1" name="group1" disabled="disabled">
<br>
<input type="radio" class="child1" name="group2" disabled="disabled">
<input type="radio" class="child1" name="group2" disabled="disabled">
<input type="radio" class="child1" name="group2" disabled="disabled">
<br>
<input type="text" class="child1" disabled="disabled">

（我使用 getElementsByClassName ，因为我知道您只能通过 html 页面拥有一个 ID（即 getElementById 不起作用）。

JSFIDDLEhttps://jsfiddle.net/w2992L1y/

【问题讨论】：

我不懂纯js，所以我不能给你答案，但我可以给你基本的评论——你想做的是，在复选框上添加一个eventListener，单击时，对相互类名执行 foreach 语句并添加 disabled 属性。
有什么问题？
另外，不要使用内联 js - 这是一种不好的做法，会导致代码难以维护
此代码无效：link
检查这个：jsfiddle.net/g96j4g7g

标签： javascript html forms checkbox

【解决方案1】：

disabled 属性没有与之关联的值。因此，要禁用输入元素，您只需要执行<input disabled>。与使用 JavaScript 启用/禁用输入元素类似，您需要执行以下操作：

element.disabled = true;  //disable
element.disabled = false;  //enable

对于您的示例，您可以执行以下操作：

function myFunction() {

  var elements = document.getElementsByClassName("child1");
  var el = document.getElementById("myCheck");

  for (var i = 0; i < elements.length; i++) {
    if (el.checked) {
      elements[i].disabled = true;
    } else {
      elements[i].disabled = false;
    }
  }
}

<input type="checkbox" id="myCheck" onChange="myFunction()">Click the button to disable the form input elements
<br>

<input type="radio" class="child1" name="group1">
<input type="radio" class="child1" name="group1">
<input type="radio" class="child1" name="group1">
<br>
<input type="radio" class="child1" name="group2">
<input type="radio" class="child1" name="group2">
<input type="radio" class="child1" name="group2">
<br>
<input type="text" class="child1">

这是相同的工作小提琴：https://jsfiddle.net/prerak6962/g96j4g7g/2/

【讨论】：

或者甚至是elements[I].disabled = el.checked，如果你喜欢简洁的话。