Setting validation for button if atleast one check box is selected in ng-repeat

Question

I'm facing a problem in which if I need to enable the save button if at least one check box is selected which is inside ng-repeat. When I click for the first time it works well but dosen't work for multiple check box clicks.

Below is the working plunker:

Disabling save button

I'm using ng-change to get the selected condition..

 $scope.getSelectedState = () => {
                var selectedCount = new Array();

                for (var i in $scope.selected) {
                    selectedCount.push($scope.selected[i]);
                }
                var allTrue = selectedCount.every(function (k) { return k });
                if (allTrue) {
                    $scope.isSelected = false;
                } else {
                    $scope.isSelected = true;
                }
            }

score 2 · Answer 1 · answered Feb 04 '16 at 13:50

How about this:

$scope.getSelectedState = () => {
    var selectedCount = new Array();

    for (var i in $scope.selected) {
        selectedCount.push($scope.selected[i]);
    }

    $scope.isSelected = selectedCount.indexOf(true) !== -1 ? false : true;
}

You fill the array with the checkbox values and then check if that array contains true value with indexOf

Shaishab Roy · Accepted Answer · 2016-02-04T14:00:59.470

2

just change your getSelectedState . see PLUNKER DEMO

like:

 $scope.getSelectedState = function() {
     $scope.isSelected = true;
     angular.forEach($scope.selected, function(key, val) {   
     if(key) {
       $scope.isSelected = false;
     }
   });
 };

and you should use ng-repeat in <tr> tag instead of <body> tag according to your plunker demo.

edited Feb 04 '16 at 14:00

answered Feb 04 '16 at 13:52

Shaishab Roy

16,335
7
50
68

score 2 · Answer 3 · answered Feb 04 '16 at 13:55

Here is my suggestion. Whenever there is any checked item, it will make variable "isAnyTrue = true".

 $scope.getSelectedState = () => {
                var selectedCount = new Array();
               
         
                var isAnyTrue  = false;
                for (var i in $scope.selected) {
                    if ($scope.selected[i] === true){
                     isAnyTrue = true;
                    }
                    selectedCount.push($scope.selected[i]);
                }
                var allTrue = selectedCount.every(function (k) { return k });
                 $scope.isSelected = !isAnyTrue;
                
            }

score 2 · Answer 4 · answered Feb 04 '16 at 13:57

Here is your updated app.js:

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

    app.controller('MainCtrl', function($scope) {
      $scope.name = 'World';
             $scope.selected = {};

                $scope.outputType = [
                    {
                        "id": 1,
                        "name": "Coal"
                    },
                    {
                        "id": 2,
                        "name": "Rom"
                    },
                    {
                        "id": 3,
                        "name": "Waste"
                    }
                ];
                $scope.months = ["JAN", "FEB"];
                $scope.values = [];

                $scope.isSelected = true;

                $scope.getSelectedState = (id) => {
                     var selectedCount = 0;

                    for(var key in $scope.selected){
                        if($scope.selected[key]){
                          selectedCount++;
                        }

                    }

                    if(selectedCount!=0){
                       $scope.isSelected = false;
                    }else{
                       $scope.isSelected = true;
                    }

                }



    });

score 2 · Answer 5 · answered Feb 04 '16 at 14:00

Do this:

$scope.isSelected = false;
        $scope.getSelectedState = () => {
            var atleastOneSelected = false;
            for (var i in $scope.selected) {
              atleastOneSelected = atleastOneSelected || $scope.selected[i];
            }
            $scope.isSelected = atleastOneSelected;
        }

And have following in html part:

<button type="button" ng-disabled="!isSelected" ng-click="save()">Save</button>

score 2 · Answer 6 · answered Feb 04 '16 at 14:47

I'm a bit late to the question and I saw everyone already gave you a lot of great tips.

I found something different you may like, that does not involve any controller (Javascript) code.

Here is the HTML for the checkbox :

<label class="checkbox" >
                    <input type="checkbox" class="form-control"
                           ng-model="selected[item.id]" ng-init="state = -1" ng-click="state = state * -1;$parent.validFields = $parent.validFields + state;" /><i></i>
                </label>

And for the button :

 <button type="button" ng-disabled="validFields <= 0" ng-click="save()">Save</button>

Basically the general idea is this one : you have a "validFields" counter that starts at 0 (= no field is activated). The button is displayed if this value is above 0.

Every checkbox has a "state", that is either 1 or -1. Everytime you click on a checkbox, it adds its state to the counter, indicating whether it is ON or OFF, and switches its states. The next time you click you "cancel" the previous value that was added to the validation.

Working Plunker link here : PLUNKER DEMO

Happy coding!

score 0 · Answer 7 · answered Sep 01 '16 at 09:14

call on ng- change function, (checkbox is in ng-repeat):

<input type="checkbox" name="selected" ng-model="library.isSelected" ng-change="auditCtrl.showButton()"/>

<button class="btn btn-primary" type="button" ng-click="auditCtrl.sendApproval()" ng-disabled="!auditCtrl.showSend">Send</button>

.js

auditCtrl.showButton = function()
{   
    var arrayCheck = [];
    for(var k = 0; k < auditCtrl.libraries.length; k++)
    {
        if(auditCtrl.libraries[k].isSelected == true)
        {
             arrayCheck.push(auditCtrl.libraries[k]);
        }
    }
    if(arrayCheck.length > 0)
    {
        auditCtrl.showSend = true;
    }
    else
    {
        auditCtrl.showSend = false;
    }
}

Setting validation for button if atleast one check box is selected in ng-repeat

7 Answers7