CODEWITHSUNDEEP
javascripthtmlangularionic-framework
Mr.Shah
Mr.Shah

Reputation: 61

Disable button when checkbox is unchecked

when user does not check the checkbox, I want the submit button to be disabled.

<ion-row *ngFor="let item of classDescription; let i = index" >
    {{ item.Location }} 
     {{ item.Instructor }}

  <ion-checkbox style="text-align: center;" 
     (ionChange)="onChecked($event,item)"
     [checked]="item.checked"
     name="classCheck"
     [(ngModel)]="item.register">
  </ion-checkbox>
</ion-row>

<ion-button color="success"
   expand="block"
   (click)="btnSubmit()"
   [disabled]="!classCheck">
 Submit
</ion-button>

Since, there item variable from another tag, i cant use it to another tag. I tried to call by name. but its not working.

Upvotes: 0

Views: 559

Answers (1)

ProSheta
ProSheta

Reputation: 305

<ion-row *ngFor="let item of classDescription; let i = index" >
    {{ item.Location }} 
     {{ item.Instructor }}

 <ion-checkbox style="text-align: center;" (ionChange)="onChecked($event,item)" [checked]="item.checked" name="classCheck" [(ngModel)]="item.register" name="classCheck"></ion-checkbox>
 </ion-row>

<ion-button color="success" expand="block" (click)="btnSubmit()" [disabled]="isNotAllCheckedYet()">Submit</ion-button>

and in your component 

   isNotAllCheckedYet():boolean{
    if(!this.classDescription){
         return false;
      }
        return this.classDescription.filter(a=>!a.register);        
    }

disable submit button if not all checked

Upvotes: 2

Related Questions