Question

我在屏幕上有10个复选框。我只想检查5个复选框。如果我检查了5个以上的复选框，我需要显示一条警告信息，＆＃34;只选择5复选框＆＃34;。

＆＃13;

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

＆＃13;

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

＆＃13;

单击复选框本身我需要显示警告消息。我需要一次只选择5个checkbok。不超过5.请帮助我如何做到这一点。

Answer 1

您可以添加将验证所选计数的复选框列表的观察者：

$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

我建议给他们上课，然后使用js选择课程并计算选择的人数：true

if($('#myclass option:selected').length() > 4){
    alert("WARNING")
}

Answer 3

您可以在foreach onclick中计算所选复选框，并在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 4

您可以使用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
    }
}

如何限制angularjs中的复选框选择

4 个答案: