使复选框需要AngularJS答案

【问题标题】：Make checkboxes required AngularJS使复选框需要AngularJS
【发布时间】：2023-04-10 20:41:01
【问题描述】：

我有一个表单，用户必须通过复选框回答问题。复选框很少，我在表单中使用 AngularJS 来验证它。基本验证是填写了所有必填字段。

下面是我的示例代码：

<input type="checkbox" name="skills"> IT
<input type="checkbox" name="skills"> Design
<input type="checkbox" name="skills"> Photoshop
<input type="checkbox" name="skills"> Writing

现在我希望复选框是必需的，以便用户从“技能”复选框中至少选中 1 个框。

我尝试过添加required 标签，但似乎没有用。

我正在使用 AngularJS 来验证我的表单

<button ng-disabled="myForm.$invalid">Submit</button>

知道如何解决这个问题吗？如果你能工作小提琴那就太好了。

【问题讨论】：

这取决于您的 ng 模型。如果要将所有值填充到数组中，则可以执行 myArray.length
@nivas 因为可以检查超过 1 个项目我使用 JavaScript 函数循环遍历所有复选框和 push 所有“选中”框到一个数组中。并将该阵列发送到我的服务器。所以没有使用 ng-model。
那么你就可以检查数组长度了
@nivas 是真的。我可以检查数组长度，但只有在我提交表单时才会填充数组，因为那是函数循环通过复选框的时候。如果不“提交”表单，即使用户选中了多个框，数组也将始终为空。
使用复选框的 ng-change 事件并调用一个函数，当用户选中复选框时推送元素并在用户取消选中复选框时弹出等等表单提交检查数组的长度如果它为空然后显示他弹出或警报消息。

标签： javascript html angularjs checkbox

【解决方案1】：

如果您想使用 ng-disabled="myForm.$invalid" 进行验证

  var app = angular.module('myModule', []);

        app.controller("myController", function ($scope) {
            $scope.choices = [{"name":"IT"},{"name":"Design"},{"name":"Technology"}];
            $scope.checkBoxArray = [];
            $scope.validate = function (value) {
                if ($scope.checkBoxArray.indexOf(value) == -1){
                    $scope.checkBoxArray.push(value);
                }
                else {
                    $scope.checkBoxArray.splice($scope.checkBoxArray.indexOf(value), 1);
                }
            }
        });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="myModule">
  <body ng-controller="myController">
<ng-form name="myForm">
    <span  ng-repeat="choice in choices">
        <input type="checkbox" name="skills" ng-required="checkBoxArray.length==0" ng-model="choice.checked" ng-change="validate(choice.name)">
        {{choice.name}}
    </span>
</ng-form>
<button ng-disabled="myForm.$invalid">Submit</button>
</body>
</html>

【讨论】：

【解决方案2】：

试试这个工作演示：

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl',function($scope) {
    
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
    <form name="checkBoxForm">
       <input type="checkbox" name="skills" ng-model="IT">IT
       <input type="checkbox" name="skills" ng-model="Design">Design
       <input type="checkbox" name="skills" ng-model="Photoshop">Photoshop
       <input type="checkbox" name="skills" ng-model="Writing">Writing

    <button ng-disabled="!IT&&!Design&&!Photoshop&&!Writing">Submit</button>
  </form>
</div>

【讨论】：

【解决方案3】：

您可以使用数组来执行此操作：

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl',function($scope) {

$scope.collection=[{
                  "Name": "IT"},
              {
                  "Name": "Design"},
              {
                  "Name": "Photoshop"},
              {
                  "Name": "Writing"}];

$scope.disableButton = true;

$scope.doTheThings = function (item)
  {
    if (item.checked) 
      $scope.disableButton = true;
    else 
      $scope.disableButton = false;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<ul>
 <li ng-repeat="item in collection">
  <input type="checkbox" name="skills" ng-model="item.checked" ng-click="doTheThings(item)"> {{item.Name}}
 </li>
</ul>
<button ng-disabled="disableButton"> Submit </button>
 </form>
</div>

【讨论】：

这个答案中有一些错误。当您单击多个复选框并取消选中一个复选框时，即使已经选中了一些复选框，提交按钮也会禁用。