admin管理员组

文章数量:1401919

I have a form where users have to answer questions through checkboxes. There are quite few checkboxes and I'm using AngularJS in the form to validate it. A basic validation is that all the required fields are filled.

Below is my example code:

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

Now I want the checkboxes to be required so from the "skills" checkboxes the user atleast checks 1 box.

I've tried putting the required tag but it didn't seem to work.

Im using AngularJS to validate my form like so

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

Any idea how I can fix this? If you can working fiddle that would great.

I have a form where users have to answer questions through checkboxes. There are quite few checkboxes and I'm using AngularJS in the form to validate it. A basic validation is that all the required fields are filled.

Below is my example code:

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

Now I want the checkboxes to be required so from the "skills" checkboxes the user atleast checks 1 box.

I've tried putting the required tag but it didn't seem to work.

Im using AngularJS to validate my form like so

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

Any idea how I can fix this? If you can working fiddle that would great.

  • javascript
  • html
  • angularjs
  • checkbox
Share Improve this question edited Feb 1, 2017 at 11:12 lin 18.4k4 gold badges66 silver badges87 bronze badges asked Feb 1, 2017 at 10:56 SkywalkerSkywalker 5,20417 gold badges66 silver badges127 bronze badges 7
  • It depends on your ng-model. If you are filling all the values into an array then you can do myArray.length – nivas Commented Feb 1, 2017 at 11:01
  • @nivas as more then 1 item can be checked I use a JavaScript function to loop through all the checkboxes and push all the "checked" boxes into an array. And send that array to my server. So didn't use the ng-model. – Skywalker Commented Feb 1, 2017 at 11:04
  • then you can check array length right – nivas Commented Feb 1, 2017 at 11:10
  • @nivas true. I can check array length but the array is only populated when I submit the form because thats when the functions loops through the checkboxes. Without "submitting" the form the array will always be empty even though the user has checked multiple boxes. – Skywalker Commented Feb 1, 2017 at 11:12
  • use ng-change event of checkbox and call a function in that that push element when user checks the checkbox and pop when user untick the checkbox so on form submission check the length of array if its empty then show him popup or alert message. – Abhishekkumar Commented Feb 1, 2017 at 11:17
 |  Show 2 more ments

3 Answers 3

Reset to default 2

If you want to validate using 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./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>

Try this working demo :

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

myApp.controller('MyCtrl',function($scope) {
    
});
<script src="https://ajax.googleapis./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>

You can use a array to do this:

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./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>

本文标签： javascriptMake checkboxes required AngularJSStack Overflow

版权声明：本文标题：javascript - Make checkboxes required AngularJS - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744325373a2600702.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。