Question

目标是在选中一个框时禁用所有选中的复选框。当我在下面使用这个jquery代码时，由于某种原因它不像在提到的here的SO解决方案中那样工作。

在这个例子中，我使用nodejs和angular stack中的MVC控制器填充表。显示此表时，表中打印的每个名称旁边都有一个复选框。 当选中一个复选框时，是否有正确禁用此角度脚本中填充的复选框的解决方案？

HTML

<table>
<thead>
   <th>Names</th>
</thead>
<tr dir-paginate="x in names | filter:search | itemsPerPage:8">
   <div class="checkbox" id="nameList">
      <td><label><input type="checkbox" name="name" value={{x.name}}>  {{ x.name }}</label></td>
   </div>
</tr>
</table>

JS

$(document).ready(function(){
$('#nameList input[type=checkbox]').change(function(){
    if($(this).is(':checked')){
        $('#nameList').find(':checkbox').not($(this)).attr('disabled',true);
    }else{
        $('#nameList').find(':checkbox').attr('disabled',false);
    }
    });
})

Answer 1

尝试使用角度的ng-change和ng-model指令来处理所有这些事情。

请参阅此处https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D。

Answer 2

Here's how you do it using angular's ng-change with ng-disabled. ng-change executes an angular function whenever some changes was made to an input field(in this case, checking and unchecking the checkbox), ng-disabled on the other hand disables the input fields if the condition is true

On your template, put these to your checkbox input tag

<tr dir-paginate="x in names | filter:search | itemsPerPage:8">
   <div class="checkbox" id="nameList">
       <td>
          <label>
           <input type="checkbox" ng-disabled="isCBdisabled" ng-model="yourCBmodel" ng-change="cbChanged()" name="name" value={{x.name}}>
              {{ x.name }}
          </label>
        </td>
   </div>
</tr>

Then on your angular controller, put this

$scope.isCBdisabled = false;

$scope.cbChanged = function() {
    $scope.isCBdisabled = true;
};

So this is what I did, on my controller, I initialized a scope isCBdisabled into false so that it wont disable the checkboxes right away. Then made a function cbChanged() that changes isCBdisabled into true causing the checkboxes to be disabled because of ng-disabled. However, just like i`ve said, it will disable all checkboxes including the selected one so that's another thing to brainstorm.

角度表和带有残留选中框功能的HTML选中框

2 个答案: