在检查不同的复选框时，如何禁用复选框和文本区域的集合?

Question

我有一个HTML表，其中每行包含一系列输入(复选框和文本区)，由用户填写。我想这样做，如果该行中的第一个复选框被选中，该行中的其他输入将被禁用。我只知道基本的HTML，没有JavaScript的经验，所以我正在努力解决这个问题。

我可以通过使用其他人的帖子中使用getElementById的片段来让它为第一个输入工作，但我希望多个输入被禁用(见下文，为格式道歉)。

<td style="vertical-align:middle;text-align: center;">
<input name="aaa" onchange="Disable(this.checked)" type="checkbox" />
</td>
<script>
function Disable(_checked) {document.getElementById('bbb').disabled = _checked ? true : 
false;}
</script>
<td style="vertical-align:middle;text-align: center;"><input id="bbb" name="bbb" 
type="checkbox" /></td>

我想我可以使用几个脚本使用这使它为一行中的所有输入工作，但我确信它可以缩短。我试过给输入一个类名，并使用getElementsByClassName，但不能让它工作，也许是因为我试图禁用两种不同类型的输入一次?

任何帮助将非常感激!

Answer 1

不需要定义任何id就可以完成这项工作:

document.body.onclick = ev => {
if (ev.target.type == "checkbox")
ev.target.closest("div")
.querySelectorAll("input[type=checkbox],textarea")
.forEach(el => el == ev.target || (el.disabled = ev.target.checked))
}

<div>
<label><input name="aaa" type="checkbox">AAA</label>
<br>
<label><input name="bbb" type="checkbox">BBB</label>
<br>
<label><input name="ccc" type="checkbox">CCC</label>
<br><textarea>texarea one</textarea>
</div>
<hr>
<div>
<label><input name="aaa" type="checkbox">AAA</label>
<br>
<label><input name="bbb" type="checkbox">BBB</label>
<br>
<label><input name="ccc" type="checkbox">CCC</label>
<br><textarea>texarea two</textarea>
</div>

在这个简化的代码片段中，<div>充当表行(<tr>)的角色，因此在您的页面中，您将需要替换选择器"div"与"tr".

我猜这行

.forEach(el => el == ev.target || (el.disabled = ev.target.checked))
}

值得进一步解释。foreach循环遍历与被单击的复选框存在于同一div中的所有复选框和textarea元素。然后，根据当前元素el是否与被单击的复选框(ev.target)相同，要么什么都不发生，要么在el不是被单击的元素的情况下，el的display-property被设置为被单击的复选框的选中状态。我正在利用JavaScript使用"或"来处理表达式的事实。(||)操作符以惰性方式:如果条件之前的"或"操作符为真，则第二个表达式(在"或"之后)完全无关，甚至不再求值。