如何根据选中的复选框禁用复选框？

Question

根据所选内容，某些字段需要禁用。如果选择了 isTest 和 isFunctional，则应禁用 isTimed 和反向。如果选择 isTimed，则应禁用 isTest 和 isFunctional。检查代码：

      <div class="checkbox">

        <label for="waiting"> waiting </label>

        <input class="input-control checkbox-box" [attr.disabled]="vajica" (change)="checkboxChanged($event)" formControlName="isTest" name="waiting" id="waiting"

          type="checkbox">

      </div>

      <div class="checkbox">

        <label for="functional"> functional </label>

        <input class="input-control checkbox-box" [attr.disabled]="vajica" (change)="checkboxChanged($event)" formControlName="isFunctional" name="functional" id="functional"

          type="checkbox">

      </div>

      <div class="checkbox">

        <label for="test"> test </label>

        <input class="input-control checkbox-box" [attr.disabled]="testica" (change)="checkboxChanged($event)" formControlName="isTimed" name="test" id="test" type="checkbox">

      </div>

  vajica: boolean = false;

  testica: boolean = false;

        checkboxChanged(e){

        console.log(e.target);

        console.log(this.exerciseAddForm); 

    

        if(this.exerciseAddForm.value.isTimed){

          alert('true')

          this.vajica = true;

        }

        if(this.exerciseAddForm.value.isTest ||this.exerciseAddForm.value.isFunctional) {

          this.testica = true;

        }

      }

Answer 1

我应该假设你正在使用反应形式并且你有一些类似的myForm=new FormGroup({&nbsp; isTest:new FormControl(),&nbsp; isFunctional:new FormControl(),&nbsp; isTimed:new FormControl()})所以，你有更新后我们需要注意“disabled”，如果我们写 [attr.disabled]="true" 或写 [attr.disabled]="false"，有些会被禁用，所以如果条件为 false，我们需要该值必须为空[attr.disabled]="(condition) || null"刚刚更正&nbsp; &nbsp; <form [formGroup]="myForm">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="checkbox">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="waiting"> waiting </label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input class="input-control checkbox-box" formControlName="isTest"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [attr.disabled]="myForm.get('isTimed').value|| null"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="waiting" id="waiting"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="checkbox">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="checkbox">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="functional"> functional </label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input class="input-control checkbox-box" formControlName="isFunctional"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [attr.disabled]="myForm.get('isTimed').value || null"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="functional" id="functional"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="checkbox">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="checkbox">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="test"> test </label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input class="input-control checkbox-box" formControlName="isTimed" name="test"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;[attr.disabled]="(myForm.get('isTest').value && myForm.get('isFunctional').value) || null"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;id="test" type="checkbox">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; </form>查看 .ts 中没有（更改）事件或代码。这使得如果您通过代码更改表单的值，例如使用 pathValuemyForm.patchValue({isTest:true,isTimed:false})根据新值启用“复选框”。更新了 2但这并没有改变为 true 值，所以我们需要使用“change”。但在reactiveForms中我们可以做一些比使用change: subscribe to更好valueChanges的控件。由于我们不想采用树订阅，因此我们将使用 rxjs combineLastest(*) 并编写&nbsp; &nbsp;combineLatest(&nbsp; &nbsp; &nbsp; this.myForm.get("isTest").valueChanges.pipe(startWith(this.myForm.value.isTest)),&nbsp; &nbsp; &nbsp; this.myForm.get("isFunctional").valueChanges.pipe(startWith(this.myForm.value.isFunctional)),&nbsp; &nbsp; &nbsp; this.myForm.get("isTimed").valueChanges.pipe(startWith(this.myForm.value.isTimed))&nbsp; &nbsp; )&nbsp; &nbsp; &nbsp; .subscribe(([isTest, isFunctional, isTimed]: [any, any, any]) => {&nbsp; &nbsp; &nbsp; &nbsp; const timedCtr = this.myForm.get("isTimed");&nbsp; &nbsp; &nbsp; &nbsp; const testCtr = this.myForm.get("isTest");&nbsp; &nbsp; &nbsp; &nbsp; const functionalCtr = this.myForm.get("isFunctional");&nbsp; &nbsp; &nbsp; &nbsp; if (isTimed) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; testCtr.disable({ emitEvent: false });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; functionalCtr.disable({ emitEvent: false });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; testCtr.setValue(false, { emitEvent: false });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; functionalCtr.setValue(false, { emitEvent: false });&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; testCtr.enable({ emitEvent: false });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; functionalCtr.enable({ emitEvent: false });&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; if (isTest && isFunctional) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; timedCtr.disable({ emitEvent: false });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;timedCtr.setValue(false, { emitEvent: false });&nbsp; &nbsp; &nbsp; &nbsp; } else timedCtr.enable({ emitEvent: false });&nbsp; &nbsp; &nbsp; });&nbsp; }你可以在 stackblitz 中看到两种方式(*)combineLastest (observable1,observable2,...).subscribe([response1,response2,..]) 使我们在response1中得到observable1的响应，在response2中得到observable2的响应......但是我们需要所有的observables都发出一些值。这就是原因，因为我们需要使用 startWith

Answer 2

首先，我认为了解如何将数据绑定到 Angular 中的输入字段会对您有所帮助。您不需要触发更改事件来捕获和使用 Angular 中的数据。在您的情况下，您需要将打字稿文件中的数据设置为数据，然后可以绑定到输入字段isTimed: boolean;isTest: boolean;isFunctional: boolean;对于您的问题，您需要将disabled角度指令（？我忘记它叫什么）添加到字段中input，并附加您需要的条件。例如，假设您正在尝试禁用该isTimed字段。根据您的规则可以执行类似以下操作。为了便于阅读，我缩短了该input字段。<input type="checkbox" [(ngModel)]="isTimed" [disabled]="isTest && isFunctional" />这会将isTimed变量绑定为您的模型checkbox，因此当您单击时，input checkbox isTimed将被设置为 true，而不需要触发任何更改事件。这里的指令[disabled]将持续监视isTest并在两者都为真时isFunctional禁用输入。isTimed根据您使用的 Angular 版本，语法会有所不同，因此我会查找如何为您的 Angular 版本“禁用有条件的输入字段”。再次查看如何将数据绑定到输入字段。这会让你的工作变得更加轻松

Answer 3

这是一个简单的解决方案。通过添加此监听每个复选框将解决您的问题：function checkClick(){    let isFunctional = document.getElementById('functional')  let isTest = document.getElementById('waiting')  let isTimed = document.getElementById('test')  if(isTest.checked && isFunctional.checked){    isTimed.checked = false    isTimed.disabled = true  }else if(isTimed.checked){    isFunctional.checked = false    isFunctional.disabled = true    isTest.checked = false    isTest.disabled = true  }else{    isFunctional.disabled = false    isTimed.disabled = false    isTest.disabled = false  }  }您必须牢记所有限制情况。取消选中时，您需要启用其他复选框等。