如何使用 ionic 2 和 angular2 从多个复选框中仅选中单个复选框

Question

目前正在研究 ionic2 和 angular2 我有 7 个复选框的字段。我只需要 select 一个特定的复选框，其余的复选框应该是 disabled.Similarly，我还需要获取剩余的 6 个复选框。我怎样才能做到这一点，这是我在 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>

Answer 1

这可能会做你想做的（未测试）：

<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 从多个复选框中仅选中单个复选框

How to get selected only single checkbox from multiple checkboxes using ionic 2 and angular2

checkbox

typescript

ionic2

angular