How to restrict checkbox selection in angularjs - angularjs

Question

I have 10 check boxes in a screen. I want check only 5 check boxes. If I check more than 5 checkboxes, I need to show one alert message, "select only 5 check box".
jsfiddle
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>
On click of checkbox itself I need to show the alert message. I need to select only 5 checkbok at a time. Not more than 5. Please help me how can i do this.

Answer 1

You can add watcher that will validate checkbox list for selected count:
$scope.$watch(function () {
return $scope.items;
},
function (newValue, oldValue) {
if(newValue !== undefined && oldValue !== undefined){
var selected = newValue.filter(function(_item){
return _item.selected == true;
});
if(selected.length > 4){
//disable other checkboxes
angular.forEach($scope.items, function(item, key) {
if(item.selected === false){
item.disabled = true;
}
});
}
else{ // enable all
angular.forEach($scope.items, function(item, key) {
item.disabled = false;
});
}
}
}, true);
Demo

Answer 2

You could count the selected checkboxes in a foreach onclick and show alert if count >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');
}
}

Answer 3

I'd recommend giving them classes then using js to select the class and do a count of how many have selected:true
if($('#myclass option:selected').length() > 4){
alert("WARNING")
}

Answer 4

You can make use of ng-change directive.
<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
}
}