在某些单选按钮选择条件下启用禁用的字段集

Question

这是我想要实现的目标：

只有在满足以下两个条件后disabled才从baz字段集中删除属性：

1. 如果选中one或two。
2. 检查任何bar无线电输入后。

因此，如果选择了three，则在检查任何bar输入后baz请勿从字段集中移除disabled属性。

我知道如何解决上面列出的第一个条件，但不知道第二个条件。我错过了什么？

const form = document.forms[0]
const foo = form.elements.foo
const bazFieldset = form.querySelector("fieldset:last-of-type")
foo.forEach(foo => {
foo.addEventListener("click", () => {
if (foo.value != "three") {
bazFieldset.disabled = false
} else {
bazFieldset.disabled = true
}
})
})

<form>
<fieldset>
<label><input type=radio name=foo value=one>One</label>
<label><input type=radio name=foo value=two>Two</label>
<label><input type=radio name=foo value=three>Three</label>
</fieldset>
<fieldset>
<label><input type=radio name=bar value=four>Four</label>
<label><input type=radio name=bar value=five>Five</label>
<label><input type=radio name=bar value=six>Six</label>
</fieldset>
<fieldset disabled>
<label><input type=radio name=baz value=seven>Seven</label>
<label><input type=radio name=baz value=eight>Eight</label>
<label><input type=radio name=baz value=nine>Nine</label>
</fieldset>
</form>

Answer 1

我会将change侦听器附加到容器，而不是为每个元素分配一个侦听器，并使用一个可以接受选择器字符串作为输入的辅助函数，并将输出是否检查了与该选择器匹配的元素：

const bazFieldset = document.querySelector("fieldset:last-of-type")
const isChecked = selectorStr => document.querySelector(selectorStr + ':checked');
document.forms[0].addEventListener('change', () => {
const enabled = (
(isChecked('[value="one"]') || isChecked('[value="two"]'))
&& isChecked('[name="bar"]')
);
bazFieldset.disabled = !enabled;
});

<form>
<fieldset>
<label><input type=radio name=foo value=one>One</label>
<label><input type=radio name=foo value=two>Two</label>
<label><input type=radio name=foo value=three>Three</label>
</fieldset>
<fieldset>
<label><input type=radio name=bar value=four>Four</label>
<label><input type=radio name=bar value=five>Five</label>
<label><input type=radio name=bar value=six>Six</label>
</fieldset>
<fieldset disabled>
<label><input type=radio name=baz value=seven>Seven</label>
<label><input type=radio name=baz value=eight>Eight</label>
<label><input type=radio name=baz value=nine>Nine</label>
</fieldset>
</form>