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

我在屏幕上有10个复选框。我只想勾选5个复选框。如果我选中了5个以上的复选框，我需要显示一条警告消息，“仅选择5个复选框”

var myApp=angular.module（'myApp'，[]）；
函数MyCtrl（$scope）{
$scope.items=[{
id:1，
标题：“项目1”，
所选：真
},{
id:2，
标题：“项目2”，
所选：false
},{
id:3，
标题：“项目3”，
所选：false
},{
id:4，
标题：“项目4”，
所选：false
},{
id:5，
标题：“第5项”，
所选：false
},{
id:6，
标题：“第6项”，
所选：false
},{
id:7，
标题：“第7项”，
所选：false
},{
id:8，
标题：“第8项”，
所选：false
},{
id:9，
标题：“第9项”，
所选：false
},{
id:10，
标题：“第10项”，
所选：false
}
];
}

{{item.title}

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

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

---

您可以在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');
    }
}

---

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

$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);

---

您可以使用

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

$scope.processChecked=函数（项）{
var checked=$scope.items.filter（函数（i）{
返回i.selected；
});
如果（选中。长度>5）{
警惕（“超过5！”）；
item.selected=false；//撤消上一个操作
}
}

这正在工作。但它只是在显示警告信息。如果超过5个，我需要显示警报消息，并需要取消选中其余选定项。嘿，对不起，不是这样的。不要禁用其余字段。我不想显示警报消息并取消选中剩余的。@sathishkumar我想你可以做你的家庭作业来完成这项任务：）嗨。这很好。但我想取消选中剩余的选定项（第6个）。@sathishkumar如果“撤消上次操作”未被触发，您可能需要将其包装在

$timeout

中<代码>$timeout（函数（）{item.selected=false；}）