启用/禁用按钮的复选框

Question

我有一个包含复选框的组件，我想影响一个按钮。 首先，该按钮被禁用，一旦选中该复选框，它将被启用，否则未选中=禁用

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>

ts

checkedbtn : boolean = true

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

目前，我遇到了一个错误

无法读取未定义的属性“选中”

Answer 1

为什么不简单地使用[（ngModel）]？ 使用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>

Answer 2

这是一个适合您的示例，

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 >Register
     </button>

打字稿文件

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

我为你做了堆炸弹

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

让我们尝试一次，让我知道。

Answer 3

您可以使用event.value

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