如何使用ionic 2和angular2从多个复选框中仅选择单个复选框 [英] How to get selected only single checkbox from multiple checkboxes using ionic 2 and angular2
本文介绍了如何使用ionic 2和angular2从多个复选框中仅选择单个复选框的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
目前在ionic2和angular2
上工作我有7个复选框的字段。我只需要选择一个特定的复选框,其余的复选框应该被禁用。类似地,我还需要获取剩余的6个复选框。我该怎么做,
这是我在HTML中使用的代码
Presently working on ionic2 and angular2 I am having fields of 7 checkboxes. I need to select only one particular checkbox the remaining checkboxes should be disabled.Similarly, I need to get for remaining 6 checkboxes also. How can I do that, Here is the code I have used in my HTML
// payment.HTML
// payment.HTML
<ion-card class="ion-card">
<ion-item>
<ion-label>Cash On Delivery</ion-label>
<ion-checkbox item-right checked="true" [(ngModel)]="checked"></ion-checkbox>
</ion-item>
<ion-item no-lines>
<ion-label>PayuMoney Wallet</ion-label>
<ion-checkbox item-right checked="false" [(ngModel)]="checked"></ion-checkbox>
</ion-item>
<ion-item no-lines>
<ion-label>Pay with Paytm Wallet</ion-label>
<ion-checkbox item-right checked="false" [(ngModel)]="checked"></ion-checkbox>
</ion-item>
<ion-item no-lines>
<ion-label>Credit/ Debit Card</ion-label>
<ion-checkbox item-right checked="false" [(ngModel)]="checked"></ion-checkbox>
</ion-item>
<ion-item no-lines>
<ion-label>Net Banking</ion-label>
<ion-checkbox item-right checked="false" [(ngModel)]="checked"></ion-checkbox>
</ion-item>
<ion-item no-lines>
<ion-label>PayZapp</ion-label>
<ion-checkbox item-right checked="false" [(ngModel)]="checked"></ion-checkbox>
</ion-item>
<ion-item no-lines>
<ion-label>Pay using MobiKwiK Wallet</ion-label>
<ion-checkbox item-right checked="false" [(ngModel)]="checked"></ion-checkbox>
</ion-item>
</ion-card>
推荐答案
这可能会做您想要的事情(未经测试):
This might do what you want (not tested):
<ion-card class="ion-card">
<ion-item *ngFor="let item of options; let i=index">
<ion-label>{{item}}</ion-label>
<ion-checkbox item-right [ngModel]="checkedIdx == i"(ngModelChange)="$event ? checkedIdx = i : checkedIdx = -1" [disabled]="checkedIdx >= 0 && checkedIdx != i"></ion-checkbox>
</ion-item>
</ion-card>
class MyComponent {
checkedIdx=0;
options = [
'Cash On Delivery',
'PayuMoney Wallet',
'Pay with Paytm Wallet',
'Credit/ Debit Card',
'Net Banking',
'PayZapp',
'Pay using MobiKwiK Wallet'
];
}
这篇关于如何使用ionic 2和angular2从多个复选框中仅选择单个复选框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文