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

Question

这是我想要实现的目标:

Remove disabled attribute from the baz fieldset only after both of these conditions are met:

1. If one or two is checked.
2. After any bar radio input is checked.

因此，如果选择了 two，则不要从任何 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>