Question

我想在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;
}

问题是，只有最后一次要求的复选框正在验证。

Answer 1

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

＆＃13;

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;
      }
    })
  }
});

＆＃13;

<!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>

＆＃13;

Answer 2

使用some（）：

可以更简洁地实现这一点

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

验证所需的复选框

2 个答案: