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

Question

Some fields need to be disabled depending on what is selected. If isTest and isFunctional are selected you should disable isTimed and reverse. If isTimed is selected it should be disabled isTest and isFunctional. Check code:

      <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

First off I think it would be beneficial for you to look up how bind data to input fields in Angular. You shouldn't need to fire off a change event to capture and use data in Angular. In your case you would need to set those in your typescript file as data you can then bind to your input fields

isTimed: boolean;
isTest: boolean;
isFunctional: boolean;

For your problem you'll need to add the disabled angular directive(? I forget what it's called) onto the input fields and attach the condition you're needing for it. For example, say you're trying to disable the isTimed field. Based on your rules can do something like the following. I have shortened the input field for readability.

<input type="checkbox" [(ngModel)]="isTimed" [disabled]="isTest && isFunctional" />

This binds the isTimed variable as the model for your checkbox so when you click on the input checkbox isTimed will be set to true without the need for firing off any change events. The [disabled] directive here will constantly monitor isTest and isFunctional and will disable the isTimed input the moment both are true.

The syntax is different depending on the version of Angular you are using so I would look up how to "disable input fields with condition" for your version of Angular. Again look up how to bind data to input fields. It will make your job a lot easier

Answer 2

I shoud supose you're using Reactive Forms and that you has some like

myForm=new FormGroup({
  isTest:new FormControl(),
  isFunctional:new FormControl(),
  isTimed:new FormControl()
})

So, you has

Updated we need take care with "disabled", some is disabled if we write [attr.disabled]="true" or if you write [attr.disabled]="false", so we need that if the condition is false the value must be null

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

Just corrected

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

See that there's no (change) events or code in.ts. This make that if, eg you change hte values of the form by code, eg using pathValue

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

The "checkboxs" are enabled acording the new values.

Updated 2 but this not change to true the value, so we need use "change". But in reactiveForms we can make some better than use change: subscribe to valueChanges of the control. As we don't want take tree subscriptions, we are going to use rxjs combineLastest (*) and write

   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 });
      });
  }

You can see in the stackblitz the two ways

(*) combineLastest (observable1,observable2,...).subscribe([response1,response2,..]) make that we has in response1 the response of observable1, in response2 the response of observable2... but we need that all the observables has emitted some value. this is the reason because we need use, startWith

Answer 3

Here is a simple solution. By adding this listened for every checkbox will fix your problem:

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

You have to take in mind all the limit situations. When unchecking you need to enable other checkboxes and so on.

Here is a Codeped link that you can play by your self with my solution.

Hope that helped:)