Javascript 使用任何复选框启用/禁用所有输入和复选框

我有一个有许多文本输入字段和复选框的表单。无论何时选中复选框，都应禁用所有文本输入字段和所有其他复选框（选中的复选框除外）。取消选中此复选框后，应再次启用所有禁用的字段。 这适用于以下代码（仅显示前3行）：

不幸的是，这不起作用

---

有人能为我的问题提供简单的解决方案吗？

一种可能的方法是：；不过请注意，我修改了您的HTML，将

元素包装在父

元素中，并删除了不必要的

元素以及HTML中突出的内嵌事件处理程序：

//通过绑定到元素的命名函数
//通过JavaScript；“事件”参数
//自动从
//EventTarget.addEventListener（）方法：
功能禁用已检查（事件）{
//event.target节点是在其上
//侦听的事件最初被触发：
让target=event.target；
//“this”也是从
//EventTarget.addEventListener（）方法；此处
//检索了
//（this），转换该节点列表
//显式添加到数组，然后筛选该数组
//使用箭头函数的数组：
Array.from（this.querySelectorAll（'input'））.filter(
//我们只保留数组中的那些元素（“el”）
//不等于，因此也不等于
//更改的元素：
el=>el！==目标
//在筛选的集合上迭代：
)弗雷奇先生(
//集合中剩余的每个元素
//如果单击更改的元素，将禁用，
//或在不再单击更改的元素时启用：
el=>el.disabled=target.checked
);
}
document.querySelector（“#myForm”）.addEventListener（'change'，disableIfChecked）
/*选择下面的元素
一个要素：*/
输入+标签：：之前{
/*使用CSS添加换行符
伪元素的“content”属性
要强制将每一行添加到新行，请执行以下操作：*/
内容：'\A'；
显示：块；
}

复选框1：
复选框2：
复选框3：
对于复选框、单选按钮或选择等输入，通常最好使用
onchange
而不是
onclick
事件

为了根据需要为尽可能多的输入生成通用解决方案，最好使用
document.querySelectorAll
获取表单中的所有输入。然后，您可以迭代所有输入，并将其
disabled
属性设置为目标
复选框的
checked
值

解决方案片段如下：


函数enableDisableAll（事件）{
var allInputs=document.querySelectorAll（“#myForm input”）；
allInputs.forEach（函数（输入）{
如果（输入！==event.target）{
input.disabled=event.target.checked；
}
});
}

复选框1：

复选框2：

复选框3：


选择所有表单元素，循环并检查与单击的元素id相同的id。如果是，请不要禁用它


函数enableDisableAll（e）{
var-own=e；
var form=document.getElementById（“myForm”）；
var元素=form.elements；
对于（var i=0；i


复选框1：


复选框2：


复选框3：


感谢David Thomas的建议，但不幸的是，在Chrome、Opera、Firefox和Edge中，无论是在发布的代码片段中还是在外部JS Fiddle演示中，这对我都不起作用；在你自己的使用中会发生什么？有什么错误吗？当我运行代码段时，我得到以下错误：错误：{“message”：“Syntaxfehler”，“filename”：“，“lineno”：56，“colno”：9}您正在使用哪种浏览器Columbus，看起来它不支持ES6您是否碰巧使用Internet Explorer？我刚刚在IE上试过，不出意料，失败了；我会马上发布一个更新后的向后兼容版本。Dinesh，禁用功能非常完美，但如果取消选中相应的复选框，则无法启用again@Dinesh，如果元素没有ID，您的解决方案将无法工作attribute@Dinesh因为你的答案是被接受的，所以请更新它，使它不依赖于ID。您可以直接比较元素引用：
own！==elemets[i]
Dinesh，最后一个问题：使用您的代码，也应该可以清除表单的所有元素。我用document.myForm.elements[I].value=“”；而不是元素[i]。disabled=true；哥伦布根据你的要求更新了我的答案。现在检查一下。那是你想要的吗？
<form id="myForm">

    Checkbox 1: <input type="checkbox" name="checkbox1" id="checkboxOne" onclick="enableDisableAll();" />
    <input type="text" id="id1" name="name1" /><br>

    Checkbox 2: <input type="checkbox" name="checkbox2" id="checkboxTwo" onclick="enableDisableAll();" />
    <input type="text" id="id2" name="name2" /><br>

    Checkbox 3: <input type="checkbox" name="checkbox3" id="checkboxThree" onclick="enableDisableAll();" />
    <input type="text" id="id3" name="name3" /><br>

</form>


function enableDisableAll() {

    cb1 = document.getElementById('checkboxOne').checked;
    cb2 = document.getElementById('checkboxTwo').checked;
    cb3 = document.getElementById('checkboxThree').checked;


    document.getElementById('checkboxOne').disabled = (cb2 || cb3);
    document.getElementById('id1').disabled = (cb1 || cb2 || cb3);

    document.getElementById('checkboxTwo').disabled = (cb1 || cb3);
    document.getElementById('id2').disabled = (cb1 || cb2 || cb3);

    document.getElementById('checkboxThree').disabled = (cb1 || cb2);
    document.getElementById('id3').disabled = (cb1 || cb2 || cb3);

}

cb1 = document.getElementById('checkboxOne').checked;
cb2 = document.getElementById('checkboxTwo').checked;
cb3 = document.getElementById('checkboxThree').checked;

var cb_array = [];

cb_array.push("cb1");
cb_array.push("cb2");

var cb_array_imploded = cb_array.join(" || ");

document.getElementById('id1').disabled = (cb_array_imploded);