How to restrict checkbox selection in 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.

Maxim Shoustin · Accepted Answer · 2017-07-03 10:58:13Z

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

edited Jul 3, 2017 at 10:58

answered Jul 3, 2017 at 10:55

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

sathish kumar Over a year ago

This is working. But it is just showing alert message. If more than 5 I need to show alert message and Need to uncheck the remaining selected.

sathish kumar Over a year ago

Hey sorry not like this. Don't disable remaining fields. I jst want to show alert message and uncheck the remaining.

Maxim Shoustin Over a year ago

@sathishkumar I think you can do your homework to accomplish this task :)

Carl Kroeger Ihl · Accepted Answer · 2017-07-03 11:32:04Z

1

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

edited Jul 3, 2017 at 11:32

answered Jul 3, 2017 at 10:46

Carl Kroeger Ihl

3414 silver badges13 bronze badges

Comments

Tomos Williams · Accepted Answer · 2017-07-03 10:46:24Z

0

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

answered Jul 3, 2017 at 10:46

Tomos Williams

2,0881 gold badge15 silver badges22 bronze badges

Comments

Icycool · Accepted Answer · 2017-07-03 11:10:09Z

0

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

answered Jul 3, 2017 at 11:10

Icycool

7,1991 gold badge27 silver badges33 bronze badges

2 Comments

sathish kumar Over a year ago

Hi. This is fine. But I want to uncheck the remaining selected item(6th one).

Icycool Over a year ago

@sathishkumar if the "undo last action" didn't get triggered, you might need to wrap it in a $timeout. $timeout(function() { item.selected = false; });

Collectives™ on Stack Overflow

How to restrict checkbox selection in angularjs

4 Answers 4

3 Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related