这是我想要实现的目标:
Remove
disabled
attribute from thebaz
fieldset only after both of these conditions are met:
- If
one
ortwo
is checked.- 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>
最佳答案
我会将一个 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>
关于javascript - 在某些单选按钮选择条件下启用禁用的字段集,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51997279/