按顺序启用表单中的字段集

Question

我知道当字段集具有id属性时，如何在序列中启用下一个fieldset：

function enableFieldset(element) {
document.getElementById(element).disabled = false;
}

<fieldset id="foo" onchange="enableFieldset('bar', event)">
<label><input type="radio" name="foo">Apples</label>
<label><input type="radio" name="foo">Oranges</label>
</fieldset>
<fieldset id="bar" disabled>
<label><input type="radio" name="bar">Bus</label>
<label><input type="radio" name="bar">Airplane</label>
</fieldset>
…

我想在当前fieldset中检查输入后，以多步骤形式启用下一个兄弟姐妹fieldset，该形式没有设置id(通过使用.nextElementSibling或类似(。我还想将JavaScript与HTML代码分开(使用addEventListener(。

Answer 1

您可以使用document.querySelectorAll选择字段集，将change事件侦听器附加到所有字段集。这会将 JS 代码与 HTML 分开。

在事件处理程序中，可以获取禁用的下一个同级并启用它。为此使用nextElementSibling。

document.querySelectorAll('fieldset').forEach(fs => {
fs.addEventListener('change', function() {
var next = this.nextElementSibling;

while (next && !next.disabled) {
next = next.nextElementSibling;
}

if (next) {
next.disabled = false;
}
});
})

<fieldset id="foo">
<label><input type="radio" name="foo">Apples</label>
<label><input type="radio" name="foo">Oranges</label>
</fieldset>
<fieldset id="bar" disabled>
<label><input type="radio" name="bar">Bus</label>
<label><input type="radio" name="bar">Airplane</label>
</fieldset>
<fieldset id="bar" disabled>
<label><input type="radio" name="x">Bus1</label>
<label><input type="radio" name="x">Airplane1</label>
</fieldset>
<fieldset id="bar" disabled>
<label><input type="radio" name="y">Bus2</label>
<label><input type="radio" name="y">Airplane2</label>
</fieldset>