选择至少一个AngularJS复选框

Question

我对AngularJS比较陌生。我有一个复选框列表，其中最新的一个是强制性的。最初将检查所有这些。现在我需要至少应该检查一个。我不想发出验证消息但需要当用户试图取消选中最后一个复选框时，它将无法执行此操作。我试图通过使用angularJS来实现。

<div class="form-group">
    <div class="col-sm-12">
        <label for="search" class="lbl">
            <i class="fa fa-link"></i> Include:
        </label>
        <div class="row">
            <div class="col-sm-4">
                <input type="checkbox" id="uploadCB" ng-model="auditLog.searchObj.upload" tabindex="0">
                <label for="uploadCB" class="checkbox-white-label" id="uploadCheckBox"></label>&nbsp;&nbsp;Upload
            </div>
            <div class="col-sm-1 form-control-static">
            </div>
            <div class="col-sm-6">
                <input type="checkbox" id="editCB" ng-model="auditLog.searchObj.edit" tabindex="0">
                <label for="editCB" class="checkbox-white-label" id="editCheckBox"></label>&nbsp;&nbsp;Edit
            </div>
        </div>
        <div class="row">
            <div class="col-sm-4">
                <input type="checkbox" id="downloadCB" ng-model="auditLog.searchObj.download" tabindex="0">
                <label for="downloadCB" class="checkbox-white-label" id="downloadCheckBox"></label>&nbsp;&nbsp;Download
            </div>
            <div class="col-sm-1 form-control-static">
            </div>
            <div class="col-sm-6">
                <input type="checkbox" id="userLogCB" ng-model="auditLog.searchObj.userLog" tabindex="0">
                <label for="userLogCB" class="checkbox-white-label" id="userLogCheckBox"></label>&nbsp;&nbsp;User Log
            </div>
        </div>
        <div class="row">
            <div class="col-sm-4">
                <input type="checkbox" id="readMarksCB" ng-model="auditLog.searchObj.readMarks" tabindex="0">
                <label for="readMarksCB" class="checkbox-white-label" id="readMarksCheckBox"></label>&nbsp;&nbsp;Read Marks
            </div>
            <div class="col-sm-1 form-control-static">
            </div>
            <div class="col-sm-6">
                <input type="checkbox" id="userCreationCB" ng-model="auditLog.searchObj.userCreationEdit" tabindex="0">
                <label for="userCreationCB" class="checkbox-white-label" id="userCreationCheckBox"></label>&nbsp;&nbsp;User Creation/Edit Log
            </div>
        </div>
        <div class="row">
            <div class="col-sm-4">
                <input type="checkbox" id="superCedeCB" ng-model="auditLog.searchObj.superCede" tabindex="0">
                <label for="superCedeCB" class="checkbox-white-label" id="superCedeCheckBox"></label>&nbsp;&nbsp;Supercede
            </div>
        </div>
    </div>
</div>

我可以使用ng-required激活验证消息，但我需要禁用最后一个剩余的复选框。有谁知道我该怎么办？提前谢谢。

Answer 1

下面我使用您提供的HTML开发了一个快速示例。

为了将其合并到您的解决方案中，您需要做的是将两个JS函数checkForUncheckedBoxes和$scope.checkThemBoxes，或者更确切地说，将它们的逻辑包含在复选框后面的控制器中。

另一件事是添加ng-change属性，它告诉angular在每个复选框的每个用户更改上运行checkThemBoxes函数。该函数还将checkbox模型属性作为参数，并将其用于逻辑。

函数的逻辑是检查正在检查的复选框是否导致取消选中，如果是，则检查是否取消选中其他复选框。如果是，则当前复选框采用正值，因此不允许用户取消选中它。

这就是它。谢谢你，祝你有愉快的一天！

angular.module('checkboxExample', [])
  .controller('ExampleController', ['$scope',
    function($scope) {
      function checkForUncheckedBoxes(object, model) {
        for (var key in object) {
          if (object.hasOwnProperty(key) && model != key) {
            if (object[key] == true)
              return false;
          }
        }
        return true;
      }

      $scope.checkThemBoxes = function(model) {
        if ($scope.auditLog.searchObj[model] == false && checkForUncheckedBoxes($scope.auditLog.searchObj, model))
          $scope.auditLog.searchObj[model] = true;
      }
    }
  ]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="form-group" ng-app="checkboxExample" ng-controller="ExampleController">
  <div class="col-sm-12">
    <label for="search" class="lbl">
      <i class="fa fa-link"></i> Include:
    </label>
    <div class="row">
      <div class="col-sm-4">
        <input type="checkbox" ng-change="checkThemBoxes('upload')" id="uploadCB" ng-model="auditLog.searchObj.upload" tabindex="0">
        <label for="uploadCB" class="checkbox-white-label" id="uploadCheckBox"></label>&nbsp;&nbsp;Upload
      </div>
      <div class="col-sm-1 form-control-static">
      </div>
      <div class="col-sm-6">
        <input type="checkbox" ng-change="checkThemBoxes('edit')" id="editCB" ng-model="auditLog.searchObj.edit" tabindex="0">
        <label for="editCB" class="checkbox-white-label" id="editCheckBox"></label>&nbsp;&nbsp;Edit
      </div>
    </div>
    <div class="row">
      <div class="col-sm-4">
        <input type="checkbox" ng-change="checkThemBoxes('download')" id="downloadCB" ng-model="auditLog.searchObj.download" tabindex="0">
        <label for="downloadCB" class="checkbox-white-label" id="downloadCheckBox"></label>&nbsp;&nbsp;Download
      </div>
      <div class="col-sm-1 form-control-static">
      </div>
      <div class="col-sm-6">
        <input type="checkbox" ng-change="checkThemBoxes('userLog')" id="userLogCB" ng-model="auditLog.searchObj.userLog" tabindex="0">
        <label for="userLogCB" class="checkbox-white-label" id="userLogCheckBox"></label>&nbsp;&nbsp;User Log
      </div>
    </div>
    <div class="row">
      <div class="col-sm-4">
        <input type="checkbox" ng-change="checkThemBoxes('readMarks')" id="readMarksCB" ng-model="auditLog.searchObj.readMarks" tabindex="0">
        <label for="readMarksCB" class="checkbox-white-label" id="readMarksCheckBox"></label>&nbsp;&nbsp;Read Marks
      </div>
      <div class="col-sm-1 form-control-static">
      </div>
      <div class="col-sm-6">
        <input type="checkbox" ng-change="checkThemBoxes('userCreationEdit')" id="userCreationCB" ng-model="auditLog.searchObj.userCreationEdit" tabindex="0">
        <label for="userCreationCB" class="checkbox-white-label" id="userCreationCheckBox"></label>&nbsp;&nbsp;User Creation/Edit Log
      </div>
    </div>
    <div class="row">
      <div class="col-sm-4">
        <input type="checkbox" ng-change="checkThemBoxes('superCede')" id="superCedeCB" ng-model="auditLog.searchObj.superCede" tabindex="0">
        <label for="superCedeCB" class="checkbox-white-label" id="superCedeCheckBox"></label>&nbsp;&nbsp;Supercede
      </div>
    </div>
  </div>
</div>