Question

我知道当字段集具有fieldset属性时如何依次启用下一个id：

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，它没有设置id（通过使用.nextElementSibling或类似方法），请在当前fieldset。我还想将JavaScript与HTML代码分开（使用addEventListener）。

Answer 1

您可以使用change将document.querySelectorAll事件侦听器附加到所有字段集。这样会将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>

依次启用表单中的字段集

1 个答案: