只允许选中一个复选框，Angular 最佳实践。
[英]Allow only one checked checkbox, Angular best practice.
问题描述
Im using angular.
我使用角度。 I have Three checkboxes in a Group and i want to make sure only one of them can be checked.我在一个组中有三个复选框，我想确保只能选中其中一个。 So if one is checked the other two has to bee unchacked.因此，如果检查其中一个，则其他两个必须保持不变。 I can Think of doing this several ways with native JS or jQuery but i want to know if there is a typical Angular way of doing it.我可以考虑使用本机 JS 或 jQuery 以多种方式执行此操作，但我想知道是否有典型的 Angular 方式。
Here is Plunker with a set up of the checkboxes and angular controll.这是带有复选框和角度控件设置的 Plunker。 http://plnkr.co/edit/IZmGwktrCaYNyrWjfSqf?p=preview 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>
5 个解决方案
解决方案1
4 已采纳 2016-10-07 14:35:13
Since you can't use radio buttons, I've made this plnkr when you check one the others are deselected: 由于您无法使用单选按钮，因此当您检查其他按钮时，我已经创建了此plnkr：
http://plnkr.co/edit/apSE3cIXA7DIvulBfNGX?p=preview 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>
Hope it helps =) 希望它有帮助=）
Edit: You can probably change the state of the other checkboxes in the controller for best practice, made in the html just to demonstrate more quickly.. 编辑：您可以更改控制器中其他复选框的状态以获得最佳实践，在html中进行更快速演示...
解决方案2
1 2016-10-07 16:27:14
Another way to do it would be: http://plnkr.co/edit/kH12pYkXfY6t6enrlSns 另一种方法是： 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>
The controller would look like this: 控制器看起来像这样：
$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'
}
解决方案3
0 2016-10-07 14:53:22
You might want to do it the hard way out. 你可能想要艰难地解决这个问题。 http://plnkr.co/edit/A53w4IJMRXQmvRsxa8JA and it should work 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 ++; },
解决方案4
0 2019-10-16 15:37:50
This works perfectly fine for angular 6 or 8这对于角度 6 或 8 非常有效
HTML: 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 code: .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;
}
}
解决方案5
-1 2016-10-07 14:30:10
Why don't you just use a radio button? 你为什么不用单选按钮？
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.