samedi 15 mai 2021

Dynamically disable angular mat radio checkbox, based on radio button value

I have a use case where , I need to disable 2 check boxes from list of check boxes depending on the radio button value chose. From the way I have implemented at the moment all the check boxes are being disabled.

<mat-radio-group  (change)="filterDashBoardActivated($event)">
     <mat-radio-button [value] ="0"><b>Dash Board Filter</b> </mat-radio-button>
     <mat-radio-button [value] ="1"><b>Download Excel Sheet</b></mat-radio-button>
</mat-radio-group>

The code above showcases how I have implemented the 2 radio buttons.

 filterDashBoardActivated(radioButton: MatRadioChange) {
    if(radioButton.value === 1){
        this.isExcelDownloadEnabled = true;
    }else{
        this.isExcelDownloadEnabled = false;
    }
}

The above function is executed when the radio button value is change. If the value I have gotten is 1 the 2 check boxes from the check box should be disabled. I have declared a variable named isExcelDownloadEnabled and I have passed it as the condition for the check boxes that I need to be disabled when it is true as below,

 <mat-checkbox name="all"[disabled]="isExcelDownloadEnabled">
      <b>All</b>
  </mat-checkbox>

But at the moment when isExcelDownloadEnabled is true all the check boxes gets disabled and I have not added the isExcelDownloadEnabled condition to other check boxes.

Is there something wrong in the approach I have taken? Why are all the check boxes getting disabled even though the condition I have used is only implemented in one checkbox?




Aucun commentaire:

Enregistrer un commentaire