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 countc中：

@Injectable({
  providedIn: 'root'
})
export class LoadinInterceptorService implements HttpInterceptor {

  constructor(private spinner:NgxSpinnerService, private router: Router) { }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    this.router;

    this.spinner.show();
    return next.handle(req).pipe(
      finalize(() => this.spinner.hide())
    );
  }

}

Answer 3

使用HTMLFormElement和HTMLFormControlsCollection接口引用form controls。选中特定复选框时，使用Event Delegation控制具有相同[name]属性的所有复选框的行为。

在演示中，所有复选框都包装在一个表单标签中。当选中#id为[name=ver]的复选框时，所有带有#vat的复选框将被禁用，反之亦然。演示中详细评论。

// 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>

在事件发生时更改与dom相关的元素

3 个答案: