Question

我使用角度。我在一个组中有三个复选框，我想确保只能检查其中一个。因此，如果一个人被检查，其他两个必须不受限制。我可以想到用本机JS或jQuery做这几种方式，但我想知道是否有一种典型的Angular方式。

这是Plunker的复选框和角度控件的设置。 http://plnkr.co/edit/IZmGwktrCaYNyrWjfSqf?p=preview

<body ng-controller="MainCtrl">

  <div>
    {{vm.Output}}

    <br>
    <br>
    <br>
    <label>
      <input type="checkbox" name="groupA" ng-model="vm.a1" ng-change="vm.changeGroupA()"> A1 </label>
    <label>
      <input type="checkbox" name="groupA" ng-model="vm.a2" ng-change="vm.changeGroupA()"> A2 </label>
    <label>
      <input type="checkbox" name="groupA" ng-model="vm.a3" ng-change="vm.changeGroupA()"> A3 </label>

    <br>
    <br>
    <br> {{vm.Output}}
</body>

Answer 1

由于您无法使用单选按钮，因此当您检查其他按钮时，我已经取消了这个plnkr：

http://plnkr.co/edit/apSE3cIXA7DIvulBfNGX?p=preview

 <label> <input type="checkbox" name="groupA" ng-model="vm.a1" ng-change="vm.a2 = false; vm.a3 = false; vm.changeGroupA()" >  A1  </label> 
 <label> <input type="checkbox" name="groupA" ng-model="vm.a2" ng-change="vm.a1 = false; vm.a3 = false; vm.changeGroupA()" >  A2  </label>
 <label> <input type="checkbox" name="groupA" ng-model="vm.a3" ng-change="vm.a2 = false; vm.a1 = false; vm.changeGroupA()" >  A3  </label>

希望有帮助=）

编辑：您可以更改控制器中其他复选框的状态以获得最佳实践，在html中进行更快速演示...

Answer 2

另一种方法是：http://plnkr.co/edit/kH12pYkXfY6t6enrlSns

  <br><br><br>
  <label> <input type="checkbox" name="groupA" ng-model="vm.groupA[0]" ng-change="vm.changeGroupA(0)" >  A1  </label> 
  <label> <input type="checkbox" name="groupA" ng-model="vm.groupA[1]" ng-change="vm.changeGroupA(1)" >  A2  </label>
  <label> <input type="checkbox" name="groupA" ng-model="vm.groupA[2]" ng-change="vm.changeGroupA(2)" >  A3  </label>

  <br><br><br>

控制器看起来像这样：

$scope.vm = {

  groupA: [false, true, false],
  count : 0,

  changeGroupA : function (index)
  {


    for (i = 0, len = this.groupA.length; i < len; ++i) {
      this.groupA[i] = ((1 << index) & (1 << i)) > 0;
    }


    this.Output = '(' + this.count + ')' + this.Output;
    this.count ++;

  },

  Output : 'Here we go'

}

Answer 3

你可能想要彻底解决这个问题。 http://plnkr.co/edit/A53w4IJMRXQmvRsxa8JA它应该有效

changeGroupA : function (x) { if (x === 'A1'){ $scope.vm.a1 = true; $scope.vm.a2 = false; $scope.vm.a3 = false; } else if (x === 'A2') { $scope.vm.a2 = true; $scope.vm.a1 = false; $scope.vm.a3 = false; } else if (x === 'A3') { $scope.vm.a3 = true; $scope.vm.a1 = false; $scope.vm.a2 = false; } this.Output = '(' + this.count + ')' + this.Output; this.count ++; },

Answer 4

这对于6或8号角效果很好

HTML：

<div class="custom-control custom-checkbox custom-control-inline">
                <input type="checkbox" class="custom-control-input" id="check1id" 
                [(ngModel)]="check1" (change)="onlyOneValue($event)"/>
                <label for="check1id" class="custom-control-label">Checkbox 1</label>
</div>

<div class="custom-control custom-checkbox custom-control-inline">
                <input type="checkbox" class="custom-control-input" id="check2id"
                [(ngModel)]="check2" (change)="onlyOneValue($event)" />
                <label for="check2id" class="custom-control-label"> Checkbox 2 </label>
</div>

.ts代码：

check1=false;
check2=false;
onlyOneValue(e)
{
  if (e.target.id == "Check1id") {
      this.Check1= true;
      this.Check2 = false;
    }
 else  if (e.target.id == "Check1id") {
      this.Check1= true;
      this.Check2 = false;
    }
}

Answer 5

为什么不使用单选按钮？

<label>
  <input type="radio" name="groupA" ng-model="vm.a1" ng-change="vm.changeGroupA()"> A1 </label>
<label>
  <input type="radio" name="groupA" ng-model="vm.a2" ng-change="vm.changeGroupA()"> A2 </label>
<label>
  <input type="radio" name="groupA" ng-model="vm.a3" ng-change="vm.changeGroupA()"> A3 </label>

仅允许一个选中的复选框，Angular最佳实践。

5 个答案: