如何限制angularjs中的複選框選擇

Question

我在屏幕中有10個複選框。我只想檢查5個複選框。如果我檢查超過5個複選框，我需要顯示一條警報消息，「僅選中5複選框」。

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>

在複選框中點擊自己我需要顯示警告消息。我一次只需要選擇5個checkbok。不超過5.請幫我，我該如何做到這一點。

Answer 1

我推薦給他們班然後用JS來選擇類和做的有多少人選擇了計數：真正

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

Answer 2

你可以指望在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'); 
    } 
} 

Answer 3

您可以添加觀察家將驗證複選框列表選定數：

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