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

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({

  isTest:new FormControl(),

  isFunctional:new FormControl(),

  isTimed:new FormControl()

})

所以，你有

更新后我们需要注意“disabled”，如果我们写 [attr.disabled]="true" 或写 [attr.disabled]="false"，有些会被禁用，所以如果条件为 false，我们需要该值必须为空

[attr.disabled]="(condition) || null"

刚刚更正

    <form [formGroup]="myForm">

          <div class="checkbox">

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

            <input class="input-control checkbox-box" formControlName="isTest" 

              [attr.disabled]="myForm.get('isTimed').value|| null"

              name="waiting" id="waiting"

              type="checkbox">

          </div>

    

          <div class="checkbox">

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

            <input class="input-control checkbox-box" formControlName="isFunctional" 

              [attr.disabled]="myForm.get('isTimed').value || null"

              name="functional" id="functional"

              type="checkbox">

          </div>

    

          <div class="checkbox">

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

            <input class="input-control checkbox-box" formControlName="isTimed" name="test" 

             [attr.disabled]="(myForm.get('isTest').value && myForm.get('isFunctional').value) || null" 

             id="test" type="checkbox">

          </div>

    

    </form>

查看 .ts 中没有（更改）事件或代码。这使得如果您通过代码更改表单的值，例如使用 pathValue

myForm.patchValue({isTest:true,isTimed:false})

根据新值启用“复选框”。

更新了 2但这并没有改变为 true 值，所以我们需要使用“change”。但在reactiveForms中我们可以做一些比使用change: subscribe to更好valueChanges的控件。由于我们不想采用树订阅，因此我们将使用 rxjs combineLastest(*) 并编写

   combineLatest(

      this.myForm.get("isTest").valueChanges.pipe(startWith(this.myForm.value.isTest)),

      this.myForm.get("isFunctional").valueChanges.pipe(startWith(this.myForm.value.isFunctional)),

      this.myForm.get("isTimed").valueChanges.pipe(startWith(this.myForm.value.isTimed))

    )

      .subscribe(([isTest, isFunctional, isTimed]: [any, any, any]) => {

        const timedCtr = this.myForm.get("isTimed");

        const testCtr = this.myForm.get("isTest");

        const functionalCtr = this.myForm.get("isFunctional");

        if (isTimed) {

          testCtr.disable({ emitEvent: false });

          functionalCtr.disable({ emitEvent: false });

          testCtr.setValue(false, { emitEvent: false });

          functionalCtr.setValue(false, { emitEvent: false });

        } else {

          testCtr.enable({ emitEvent: false });

          functionalCtr.enable({ emitEvent: false });

        }

        if (isTest && isFunctional) {

          timedCtr.disable({ emitEvent: false });

           timedCtr.setValue(false, { emitEvent: false });

        } else timedCtr.enable({ emitEvent: false });

      });

  }

你可以在 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

  }

  

}

您必须牢记所有限制情况。取消选中时，您需要启用其他复选框等。