CODEWITHSUNDEEP
javascriptangularjscheckbox
Netro
Netro

Reputation: 7297

Angularjs: Verify check box are clicked

I have a check box in a form. Before submitting form I want to check if atleast one check box is selected. If not, disable the submit button. List of checkbox is dynamic. I have tried with ng-click="check()"

<label class="checkbox-inline">
<input type="checkbox" name='Apple' ng-model='cb.fruit.Apple' ng-click="check()"> Apple
</label>
<label class="checkbox-inline">
<input type="checkbox" name='Grape' ng-model='cb.fruit.Grape' ng-click="check()"> Grape
</label>
<label class="checkbox-inline">
<input type="checkbox" name='Mango' ng-model='cb.fruit.Mango' ng-click="check()"> Mango
</label>

Inside Angularjs Controller, 

$scope.check = function(){
fruit_false = 0;
fruit_true = 0;

for (var o in $scope.cb.fruit){
    $log.info(o);
    if (!o) fruit_false++;
    if (o) fruit_true++;
    $log.info(fruit_false);$log.info(fruit_true);

}
// this logic needs to be corrected
if (fruit_false == 0 && fruit_true == 0)
    $scope.cd.fruitcheck = false;
else
    $scope.cd.fruitcheck = true;
}

Problem is when one check box is clicked, cb.fruit.Apple=true is not reflected. At $log.info(o); it says undefiend. When two check box are selected (Apple=true, Grape=true), $log.info(o); shows only one value (Apple= true). But it should not happen like this.

Is there any other simple way to solve this or where I am going wrong?

Upvotes: 1

Views: 1528

Answers (4)

ryeballar
ryeballar

Reputation: 30088

The solution is quite straightforward: (See associated PLUNKER DEMO)

  • Since you have mentioned that, "List of checkbox is dynamic", and relating it with the models you have created for each checkbox, then the first step would be to iterate each checkbox items using the ng-repeat directive. Use the (key, value) syntax to display each of the checkbox label and use its key as a direct reference for the models.

E.G:

<label ng-repeat="(fruitName, isChecked) in cb.fruits" for="{{fruitName}}">
  <input type="checkbox" ng-model="cb.fruits[fruitName]" id="{{fruitName}}" /> {{fruitName}}<br>
</label>
  • Create a function to determine the existence of a checked value within the $scope.cb.fruits object. Use this function in the ng-disabled directive to disable and enable the submit button.

E.G:

HTML

 <button type="submit" ng-disabled="!hasSelectedFruit()">Button</button>

JAVASCRIPT

  $scope.cb = {
    fruits: {
      Apple: false,
      Grapes: false,
      Mango: false
    }
  };

  $scope.hasSelectedFruit = function() {
    var fruits = $scope.cb.fruits;
    for(var index in fruits)
      if(fruits[index])
        return true;
    return false;
  };

Upvotes: 2

Ravi Mittal
Ravi Mittal

Reputation: 1947

Please checkout this fiddle sample.

CONTROLLER

function SampleCtrl($scope){
    $scope.heading = 'Hello World';
    $scope.items = [{name:'Apple',checked:false},{name:'Orange',checked:false},{name:'Banana',checked:false}]
    $scope.ischeckedsomething = function(){
        var checkedcount = 0;
        angular.forEach($scope.items,function(item){
            checkedcount += item.checked ? 1 : 0;
        });
        return checkedcount == 0;
    }
}

HTML

<div data-ng-app="">

    <div data-ng-controller="SampleCtrl">

        <span>{{heading}}</span>   
        <ul>
            <li data-ng-repeat="item in items">
                <label>
                    <input type="checkbox" data-ng-model="item.checked" /> {{item.name}}
                </label>
            </li>

        </ul>
        <input type="button" value="Button" data-ng-disabled="ischeckedsomething()" />
    </div>

</div>

Upvotes: 1

vaibhav
vaibhav

Reputation: 4103

First thing is that you may have to create an array object and bind it to your checkboxes ng-model, from basic programming practices you can infer that you would not require two variables fruit_false and fruit_true, only the length variable should be ok which you can increase and decrease on click of the checkbox, The statement (!o) does not signifies that the value is false because for an array you would always get some value and so this would always evaluate to true.

Upvotes: 0

jrob
jrob

Reputation: 226

I have only just perused the angular tutorial, but it appears to me that you are calling check at the wrong point. You are calling it on click of the checkbox, and it seems the value hasn't been selected yet. Call your check method before doing the submit (tie it to the submit button click or equivalent.

Upvotes: 0

Related Questions