[英]Verify that ion-checkbox is checked in Ionic
I have a checkbox list, I need to identify when at least 1 of these items is checked to enable a button.我有一个复选框列表,我需要确定何时至少选中其中一项以启用按钮。
So far I've managed to do that, but it doesn't work with event.target.checked
, just nothing happens, I also just tried event.checked
and nothing.到目前为止,我已经设法做到了,但它不适用于
event.target.checked
,什么也没发生,我也只是尝试了event.checked
但什么也没有。
<ion-list>
<ion-item *ngFor="let option of question.options">
<ion-label>{{option}}</ion-label>
<ion-checkbox color="secondary" value="option" (click)="isChecked($event)" name="option"></ion-checkbox>
</ion-item>
</ion-list>
file.ts:文件.ts:
isChecked(event) {
if ( event.target.checked ) {
console.log("Checked!");
this.btnDisabled = false;
}
}
Ionic version: 3.9.5离子版本:3.9.5
Angular 5 Angular 5
Try like this:试试这样:
Template:模板:
<ion-list>
<ion-item *ngFor="let option of question.options">
<ion-label>{{option}}</ion-label>
<ion-checkbox color="secondary" value="option" (click)="onChange(option)" name="option"></ion-checkbox>
</ion-item>
</ion-list>
<button [disabled]="checkedItems.length <1 ">Save </button>
TS: TS:
checkedItems = []
onChange(item) {
if(this.checkedItems.includes(item)) {
this.checkedItems = this.checkedItems.filter((value)=>value!=item);
} else {
this.checkedItems.push(item)
}
}
Use ionChange
instead click
and event.checked
instead event.target.checked
.使用
ionChange
代替click
和event.checked
代替event.target.checked
。
<ion-checkbox color="secondary" value="option" (ionChange)="isChecked($event)" name="option"></ion-checkbox>
isChecked(event) {
if ( event.checked ) {
this.btnDisabled = false;
}
}
I wanted to add an answer after messing around with this for a while.在弄乱了一段时间后,我想添加一个答案。 I'm on @ionic/angular@6.0.3.
我在@ionic/angular@6.0.3。
At some point, the output of $event seems to have changed to include a "detail" property that wasn't mentioned in other answers about working with ion-checkbox.在某些时候, $event 的 output 似乎已经更改为包含一个“详细信息”属性,该属性在其他关于使用 ion-checkbox 的答案中没有提到。
component.html
<ion-item>
<ion-checkbox name="agree" value="agree" (ionChange)="onCheck($event)">
</ion-checkbox>
<ion-text>I'm agreeing to something</ion-text>
</ion-item>
component.ts
onCheck(event: any) {
if(event.detail.checked) {
console.log(`It's checked`, event);
} else if (!event.detail.checked) {
console.log(`It's unchecked`, event);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.