Question

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

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

<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>

Answer 1

我不明白为什么你没有使用单选按钮，但这是一个非常简单的例子，仅使用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，此脚本应该已经为您工作，无论是否有角度

Answer 2

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); }            
  }       
}

Answer 3

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

否则..

使用像这样的JavaScript，

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

Answer 4

in 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;
    };

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

Answer 5

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

在页面控制器中：

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>

使用示例：

只选中离子中的一个复选框

5 个答案: