启用/禁用按钮的复选框

时间:2018-07-23 10:02:56

标签: javascript angular ionic-framework

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

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

此刻我遇到了错误

  

无法读取未定义的“已检查”属性

3 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

这是一个适合您的示例,

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

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

答案 2 :(得分:0)

您可以使用event.value

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