CODEWITHSUNDEEP
javascriptangularionic-framework
LisaN
LisaN

Reputation: 165

Checkbox that will enable/disable a button

I have a component that contain a checkbox,I want to affect a button. on the beginning the button is disabled, as soon as the checkbox is checked it will be enabled else unchecked = disabled

the html

<ion-item>
    <ion-label>I agree</ion-label>
<ion-checkbox   (ionChange)="changeEvent($event)"></ion-checkbox>
</ion-item>
<button (click)="register()" class="register-btn" [disabled]="checkedbtn" ion-button icon-only >
</button>

the ts

checkedbtn : boolean = true

  changeEvent(event) {
    if (event.target.checked) {
      this.checkedbtn = false
      console.log(this.cguCheck)
    }
    this.checkedbtn = true;
  }
}

At the moment i'm getting an error

cannot read property 'checked' of undefined

Upvotes: 0

Views: 1993

Answers (3)

Eliseo
Eliseo

Reputation: 57939

why not simply using [(ngModel)]? It has no much sense using a changeEvent

<ion-item>
    <ion-label>I agree</ion-label>
    <ion-checkbox [(ngModel)]="checkedbtn"></ion-checkbox>
</ion-item>
<button (click)="register()" class="register-btn" [disabled]="!checkedbtn" 
     ion-button icon-only >Register
</button>

Upvotes: 3

Krishna Rathore
Krishna Rathore

Reputation: 9687

You can use event.value

changeEvent(event) {
    if (event.value) {
      this.checkedbtn = false
    }else{
      this.checkedbtn = true;
    }
}

Upvotes: 0

Karnan Muthukumar
Karnan Muthukumar

Reputation: 1863

Here is an working example for you,

Html File,

  <ion-item>
    <ion-label>I agree</ion-label>
      <ion-checkbox   (ionChange)="changeEvent($event)"></ion-checkbox>
   </ion-item>
     <button (click)="register()" class="register-btn" [disabled]="checkedbtn" ion-button 
          icon-only >Register
     </button>

Typescript File,

changeEvent(event) {
   console.log("event.target.value",event);
   if(event.checked){
      this.checkedbtn = false;
      console.log("checkedbtn value",this.checkedbtn);
   }else{
      this.checkedbtn = true;
   }        
  }

I maded stackblitz for you,

https://stackblitz.com/edit/ionic-nkycpg

Let try this once and let me know.

Upvotes: 0

Related Questions