在事件上更改与 dom 相关的元素

Question

我的文档有多个带有类"vatcheckbox"(复选框(的 dom 元素，当更改/单击时，应该禁用带有"vatfield"类(输入字段(的 dom 相关元素。

我尝试了以下方法：

document.querySelector('.vatcheckbox').addEventListener('change', function()
  { this.parentElement.parentElement.parentElement.querySelector('.vatfield').disabled = this.checked;
    }
    )

如果存在单个.vatcheckbox实例，它确实有效。但是，当有多个.vatcheckbox实例时，更改仅附加到第一个.vatcheckbox元素。

Answer 1

这应该在没有任何库的情况下工作

document.querySelectorAll('.vatcheckbox').forEach(checkbox => {
    checkbox.addEventListener('change', function() {
      this.parentElement.parentElement.parentElement.querySelector('.vatfield').disabled = this.checked;
    })
  });

Answer 2

尝试将事件侦听器包装在 JQuery each 中：

$('.vatcheckbox').each(function(idx) {
  this.addEventListener('change', function() {
    this.parentElement.parentElement.parentElement.querySelector('.vatfield').disabled = this.checked;
  });
});

Answer 3

使用 HTMLFormElement 和 HTMLFormControlsCollection 接口来引用表单控件。选中特定复选框时，使用事件委派可以控制具有相同 [name] 属性的所有复选框的行为。

在演示中，所有复选框都包装在表单标签中。选中 #id #vat复选框时，所有带有[name=ver]的复选框都将被禁用，反之亦然。详细信息在演示中进行了注释。

// Reference form
const form = document.forms['main'];
// Reference all form controls
const x = form.elements;
// Reference all input[name=ver]
const vers = x.ver;
/** onOff()
//A - Pass Event Object
//B - Iterate through all input[name=ver]...
//C - if the origin of event is checked...
//D - disable each input[name=ver]...
//E - Otherwise enable each input[name=ver]
*/
function onOff(e) { //A
  for (let ver of vers) { //B
    if (e.target.checked) { //C
      ver.disabled = true; //D
    } else {
      ver.disabled = false; //E
    }
  }
  return false;
}
// Register input#vat to the change event -- call onOff on change event
x.vat.onchange = onOff;

<form id='main'>
  <input id='vat' type='checkbox'> VAT
  <input name='ver' type='checkbox'> verify<br>
  <input name='ver' type='checkbox'> verify<br>
  <input name='ver' type='checkbox'> verify<br>
  <input name='ver' type='checkbox'> verify<br>
  <input name='anything' type='checkbox'> Anything
  <input name='else' type='checkbox'> Else<br>
  <input name='ver' type='checkbox'> verify<br>
  <input name='ver' type='checkbox'> verify<br>
  <input name='anything' type='checkbox'> Anything
  <input name='else' type='checkbox'> Else
  <input name='ver' type='checkbox'> verify<br>
  <input name='ver' type='checkbox'> verify<br>
  <input name='ver' type='checkbox'> verify<br>
  <input name='anything' type='checkbox'> Anything
  <input name='else' type='checkbox'> Else<br>
</form>