选择至少一个复选框AngularJS
问题描述：
我对AngularJS比较陌生。我有一个复选框的列表，最新的是强制性的。最初所有这些都将被检查。现在我需要至少有一个应该一直检查。我不想发出验证消息，但需要当用户试图取消选中最后一个复选框，那么它将无法做到这一点。我试图通过使用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> 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> 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> 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> 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> 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> 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> Supercede
</div>
</div>
</div>
</div>
我能够用NG-需要触发一个验证消息，但我需要禁用最后剩下的复选框。有没有人有任何想法我该怎么办？提前致谢。
答
下面我已经开发了一个快速的例子，使用您提供的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> 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> 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> 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> 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> 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> 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> Supercede
</div>
</div>
</div>
</div>
哪里** **控制器？ – Rayon