仅选中 ionic 中的一个复选框答案

【问题标题】：Check only one checkbox in ionic仅选中 ionic 中的一个复选框
【发布时间】：2014-11-30 13:33:05
【问题描述】：

在我的表单中，我有两个复选框。但我可以同时选中两个复选框。如果选中一个复选框，我如何禁用另一个复选框。

这就是我给我的复选框的方式

<label><h4><b>Payment Type</b></h4></label>

            <ion-checkbox id="isChecked1" name="isChecked1" ng-model="isChecked1">Immediate Payment</ion-checkbox>  
            <ion-checkbox id="isChecked2" name="isChecked2" ng-model="isChecked2">Schedule Payment</ion-checkbox>

【问题讨论】：

你为什么要使用复选框来实现这种用途？单选按钮更容易完成这样的任务，不是吗？

标签： javascript angularjs checkbox ionic-framework

【解决方案1】：

也许是一个肮脏的解决方案，但没有使用控制器中的任何功能。

在页面控制器中：

private trueFormControl = new FormControl(false);
private falseFormControl = new FormControl(false);

在视图中：

<ion-content>

    <ion-item>
      <ion-label>Yes</ion-label>
      <ion-checkbox color="primary" (click)="falseFormControl.setValue(false)" [formControl]="trueFormControl"></ion-checkbox>
    </ion-item>

    <ion-item>
      <ion-label>No</ion-label>
      <ion-checkbox color="primary" (click)="trueFormControl.setValue(false)" [formControl]="falseFormControl"></ion-checkbox>
    </ion-item>

  <br>

  <div class="row">
      <ion-button type="submit" (click)="continue(actualPos)" [disabled]="!falseFormControl.value && !trueFormControl.value">Continue</ion-button>
  </div>

</ion-content>

使用示例：

【讨论】：

【解决方案2】：

我不明白您为什么不使用单选按钮，但这是一个仅使用 javascript 的非常简单的示例。

工作小提琴：

http://jsfiddle.net/qgqto6t7/

HTML：

<input type="checkbox" id="isChecked1">Immediatly</input>
<input type="checkbox" id="isChecked2">Later</input>

Javascript：

var chk1 = document.getElementById("isChecked1");
var chk2 = document.getElementById("isChecked2");

chk1.onchange = function() {
    chk1.checked ? chk2.disabled = true : chk2.disabled = false;
};

chk2.onchange = function() {
    chk2.checked ? chk1.disabled = true : chk1.disabled = false;
};

但是，请考虑使用单选按钮来完成此类任务。我很确定它们的发明是有原因的:)

另外，我的示例是纯 javascript，因为我对 angularjs 或您使用的任何东西都不是很熟悉。无论如何，您应该能够轻松地仅使用 javascript 来完成它，而不会对您的脚本造成太大影响。

编辑:: 此外，根据你的 ID，这个脚本应该已经为你工作了，不管 angularjs 与否

【讨论】：

这不是离子的。
@que 因此我的前言：“但这是一个仅使用 javascript 的非常简单的示例。”

【解决方案3】：

html

<ion-item *ngFor="let schedule of schedules">                                                         
  <ion-checkbox [(ngModel)]="schedule.selected" (click)="toggleSelected(schedule)"></ion-checkbox>                                                       
</ion-item>

打字稿

toggleSelected(item) {             
  ///////////////// Radio Behaviour in Checkbox (Only Select 1 checkbox at time) //////////////////////////////     
  if (this.selectedSchedules.length > 0) {   
    //this.schedules.forEach(r => {r.selected = false;}) // Always 1 selected
    this.schedules.filter(r => r.info.id != item.info.id).forEach(r => {
      r.selected = false;
    })
    this.selectedSchedules = [];         
  }

  if (!item.selected) { this.selectedSchedules.push(item); }
  else if (item.selected) {            
    let index = this.selectedSchedules.findIndex(c => c.info.id == item.info.id);
    if (index > -1) { this.selectedSchedules.splice(index, 1); }            
  }       
}

【讨论】：

【解决方案4】：

对不起.. 为了简单起见，您可以使用单选按钮..

否则..

像这样使用javascript，

    Check1 = document.getElementById("check1");
    Check2 = document.getElementById("check2");
    if(Check1.checked)
    Check2.checked = false;

【讨论】：

它不起作用，因为您没有使用事件侦听器，您只是在检查，onload，如果检查了 check1。你应该使用 onchange。

【解决方案5】：

在 html 中：

<ion-checkbox id="isChecked1" name="isChecked1" ng-model="choice.isChecked1" ng-change="uncheckTheOtherOne()>Immediate Payment</ion-checkbox >

在js中：

$scope.uncheckTheOtherOne = function(){
        $scope.choice.isChecked2 = false;
    };

但我不确定这是否是一个好习惯

【讨论】：