如何在angularjs中限制复选框选择
如何在angularjs中限制复选框选择
提问于 2017-07-03 10:38:02
我在一个屏幕上有10个复选框。我只想选中5个复选框。如果我选中5个以上的复选框，我需要显示一条警告消息，"select only 5 checkboxes“。
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.items = [{
id: 1,
title: 'item1',
selected: true
},{
id: 2,
title: 'item2',
selected: false
},{
id: 3,
title: 'item3',
selected: false
},{
id: 4,
title: 'item4',
selected: false
},{
id: 5,
title: 'item5',
selected: false
},{
id: 6,
title: 'item6',
selected: false
},{
id: 7,
title: 'item7',
selected: false
},{
id: 8,
title: 'item8',
selected: false
},{
id: 9,
title: 'item9',
selected: false
},{
id: 10,
title: 'item10',
selected: false
}
];
}<div ng-controller="MyCtrl">
<div ng-repeat="item in items">
<input id="{{ item.id }}"
type="checkbox"
ng-model="item.selected"
ng-checked="item.selected" />
<label for="{{ item.id }}" >{{ item.title }}</label>
</div>
</div>
单击复选框本身时，我需要显示警告消息。我一次只需要选择5个复选框。不超过5个。请帮帮我，我怎么做？
回答 3
Stack Overflow用户
发布于 2017-07-03 10:46:25
我建议给他们提供类，然后使用js选择类，并计算选择了多少个类:true
if($('#myclass option:selected').length() > 4){
alert("WARNING")
}Stack Overflow用户
发布于 2017-07-03 10:46:32
您可以在foreach onclick中对选中的复选框进行计数，如果计数>5，则显示警报
$scope.checkSelected = function(item){
var c = 0;
angular.forEach(items, function(item, key) {
if(item.selected){
c++;
}
});
if(c>5){
item.selected = false;
alert('Not more than 5');
}
}Stack Overflow用户
发布于 2017-07-03 11:10:10
您可以使用ng-change指令。
<input id="{{ item.id }}"
type="checkbox"
ng-model="item.selected"
ng-change="processChecked(item)" />
$scope.processChecked = function(item) {
var checked = $scope.items.filter(function(i) {
return i.selected;
});
if (checked.length > 5) {
alert("more than 5!");
item.selected = false; // undo last action
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44883495
复制相关文章
![关于在eclipse中中文汉字乱码的解决方式[通俗易懂]](https://ask.qcloudimg.com/http-save/yehe-8223537/f9d22e6e1401fe93c69992e133ae69a6.jpeg)
点击加载更多
相似问题
在AJAX和excel中显示汉字
在WPF中突出显示/characters行
无法在Qt-Embedded 4.7.3中显示汉字
在php中如何显示汉字？
在HTML文件中显示汉字
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
