選擇至少一個複選框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-需要觸發一個驗證消息，但我需要禁用最後剩下的複選框。有沒有人有任何想法我該怎麼辦？提前致謝。

Answer 1

下面我已經開發了一個快速的例子，使用您提供的HTML。

您需要做的是將其納入您的解決方案中，即將兩個JS函數checkForUncheckedBoxes和$scope.checkThemBoxes，或者更確切地說它們的邏輯包含在複選框後面的控制器中。

另一件事是添加ng-change屬性，它告訴角度在每個複選框的每個用戶更改上運行checkThemBoxes函數。該函數還將複選框模型屬性作爲參數並將其用於其邏輯。

這些函數的邏輯是檢查被檢查的複選框是否導致取消選中，如果是，檢查其他複選框是否未選中。如果是，則當前複選框取正值，從而禁止用戶取消選中它。

這是非常多的。謝謝你，祝你有美好的一天！

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>