Question

我想检查列表中任何时间点的任何3个复选框，当所选复选框的长度等于3时，我想禁用所有剩余复选框（未选中复选框）。但是选中的复选框应处于启用状态。我希望尽可能使用$ watch实现这一点。（在任何时候用户只能选择3个复选框;）
这是我的HTML代码 -

<html>
<head>
  <script type="text/javascript" src="angular.js"></script>
  <script type="text/javascript" src="app.js"></script>
</head>
<body ng-app="myApp">
    <div ng-controller="myCtrl">
      <div ng-repeat="std in students">
        {{std.name}}<input type="checkbox" ng-model="std.selected" ng-checked="" ng-disabled=""/>
      </div>
    </div>
</body>
</html>

这是我的app.js

var app=angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.students=[
  {selected:"f", name:"peter"},
  {selected:"f", name:"santa"},
  {selected:"f",name:"rita"},
  {selected:"f", name:"shona"},
  {selected:"f", name:"mickey"},
  {selected:"f",name:"nicky"}
]
});

Answer 1

控制器代码：

    $scope.students=[
      {selected:false, name:"peter"},
      {selected:false, name:"santa"},
      {selected:false, name:"rita"},
      {selected:false, name:"shona"},
      {selected:false, name:"mickey"},
      {selected:false, name:"nicky"}
    ];
    $scope.disabledCheckboxes = false;
    $scope.checked = function() {
        $scope.disabledCheckboxes = $scope.students.filter(function(ch) {
            return ch.selected;
        }).length > 3;
    };

和html：

    <div ng-repeat="std in students">
       {{std.name}}
       <input type="checkbox" ng-model="std.selected" ng-change="checked()"
              ng-disabled="disabledCheckboxes && !std.selected"/>
    </div>

&& !std.selected您可以取消选中所选复选框。

使用$ watch计算已选中复选框的Angularjs复选框

1 个答案: