Question

这是我想要实现的目标：

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


如果选中了one或two。

检查任何bar单选输入之后。

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

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

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>

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

1 个答案: