我有一个包含复选框的组件,我想影响按钮。 首先,该按钮被禁用,一旦选中该复选框,它将被启用,否则未选中=禁用
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;
}
}
此刻我遇到了错误
无法读取未定义的“已检查”属性
答案 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;
}
}