Question

我试图关注那里的所有例子，但我没有运气。我使用jquery验证检查创建了一个plunker。我只需要允许从组中选择1个复选框。 plunker

  <body ng-controller="MainCtrl">
  <div class="form-group fg-line">
    <label for="companies" class="control-label"><b>Role Type</b></label><br /> <br />
 <table>
    <tr ng-repeat="model in userRoles">
      <td>
        <div class="checkbox m-b-15">
          <label>
            <input id="rolebox" class="check" type="checkbox" ng-model="model.RoleId">
            <i class="input-helper"></i>
               {{model.Name}}
         </label>
       </div>
    </td>
 </tr>
   </table>
      </div>    
      <script>
       var checked = [],
          $check = $('.check').change(function () {
            if (this.value == -1 && this.checked) {
                $check.not(this).prop('disabled', true).prop('checked', false);
                checked = [];
            }
            else {
                $check.prop('disabled', false);
                checked.push(this);
                checked = $(checked)
                checked.prop('checked', false).slice(-2).prop('checked', true);
            }
        });

Answer 1

为所有复选框分配相同的name值。例如：

 <input name="nm" id="rolebox1" class="check" type="checkbox" ng-model="model.RoleId">
 <input name="nm" id="rolebox2" class="check" type="checkbox" ng-model="model.RoleId">

Answer 2

我只需要允许从该组中选择1个复选框。

正如您对问题的评论中所提到的，您应该真正使用单选按钮来实现此目的，因为它们适用于这种情况。如果必须使用复选框，则可以执行以下操作。

$(document).on("change", ".check", function() {
    var $allCheckboxes = $(".check");
    $allCheckboxes.prop("disabled", false);
    this.checked && $allCheckboxes.not(this).prop("disabled", true);
});

Your updated plunker

如何使用angular或jquery限制复选框选择

2 个答案: