验证所需的复选框答案

【问题标题】：Validate checkbox that which are required验证所需的复选框
【发布时间】：2018-01-06 19:00:30
【问题描述】：

我想在我的 angularjs 项目中创建条款和条件表单。

从多个复选框中只需要几个，我想启用提交按钮，只有在所有必需的复选框都被选中时。

这是我的复选框：

<label class="agreement-label control-label required">Zgoda</label>
<input class="agreements ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required" id="agreement_1" name="agreement" required="" ng-model="client.agreement[0]" type="checkbox">

<label class="agreement-label control-label">Zgoda 2</label>
<input class="agreements ng-pristine ng-untouched ng-valid ng-not-empty" id="agreement_2" name="agreement" ng-model="client.agreement[1]" type="checkbox">

<label class="agreement-label control-label">Zgoda 4</label>
<input class="agreements ng-pristine ng-untouched ng-valid ng-not-empty" id="agreement_5" name="agreement" ng-model="client.agreement[4]" type="checkbox">

<label class="agreement-label control-label required">Zgoda 5</label>
<input class="agreements ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required" id="agreement_6" name="agreement" required="" ng-model="client.agreement[5]" type="checkbox">

<button class="btn btn-success" id="ticketFormSubmit" ng-disabled="isAgreementsInvalid()" ng-click="changeButtonValue()" type="submit" disabled="disabled">Zapisz</button>

在我的角度控制器中：

$scope.isAgreementsInvalid = function() {
    return $scope.ticketForm.agreement.$invalid;
}

问题是，只有最后一个必需的复选框正在验证。

【问题讨论】：

更改所有复选框的name 属性。表示不重复name 属性

标签： angularjs validation checkbox

【解决方案1】：

您可以这样做，但 ng-init 对于此解决方案是必需的。此解决方案不需要名称。：-

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.isAllChecked = false;
  $scope.checkValid = function() {
    $scope.isAllChecked = true
    angular.forEach($scope.client.agreement, function(value) {
      if (!value) {
        $scope.isAllChecked = false;
      }
    })
  }
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body>

  <div ng-app="myApp" ng-controller="myCtrl">
    <form name="ticketForm">
      <label class="agreement-label control-label required">Zgoda</label>
      <input ng-init="client.agreement[0] = false;" class="agreements" id="agreement_1" required ng-model="client.agreement[0]" type="checkbox" ng-click="checkValid()">

      <label class="agreement-label control-label">Zgoda 2</label>
      <input ng-init="client.agreement[1] = false;" class="agreements" id="agreement_2" required ng-model="client.agreement[1]" type="checkbox" ng-click="checkValid()">


      <button class="btn btn-success" id="ticketFormSubmit" ng-disabled="!isAllChecked" ng-click="submitFunction()" type="submit" disabled="disabled">Zapisz</button>
    </form>
  </div>

【讨论】：

好的，但是可以通过控制器中的功能和所有复选框的“foreach”来完成吗？
@gawellus 根据要求更新答案。

【解决方案2】：

您可以使用 some() 更简洁地实现这一点：

$scope.isAgreementsInvalid = function() {
  return $scope.ticketForm.agreement.some((item) => item.$invalid);
}

【讨论】：