代码之家  ›  专栏  ›  技术社区  ›  Tzar

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

  •  0
  • Tzar  · 技术社区  · 7 年前

    fieldset 当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>
    
    …

    我想启用下一个兄弟 字段集 身份证件 .nextElementSibling 或类似的),在电流中检查输入后 字段集 . 我还想将JavaScript与HTML代码分开(使用 addEventListener ).

    1 回复  |  直到 7 年前
        1
  •  1
  •   31piy    7 年前

    您可以附加 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>