How to enable the button only if all the checkboxes are checked in angular.js for a dynamically loaded view

Question

I have the following view in angular.js where I have several checkboxes for various terms of an agreement.

<div class="modal-body">
<div class="col-xs-12 form-group">
    <p>I acknowledge that I understand the following:</p>
    <div class="checkbox" >
        <label>
          <input type="checkbox" ng-model="agreement.term1">Some term1 goes here
        </label>
    </div>
    <div class="checkbox" >
        <label>
          <input type="checkbox" ng-model="agreement.term2"> Some term2 goes here 
          is not a credit transaction.
        </label>
    </div>
    <div class="checkbox" >
        <label>
          <input type="checkbox" ng-model="agreement.term3"> Some term3 goes here
        </label>
    </div>
    <div class="checkbox" >
        <label>
          <input type="checkbox" ng-model="agreement.term4"> Some term4 goes here
        </label>
    </div>
    <div class="checkbox">
        <label>
          <input type="checkbox" ng-model="agreement.term5"> Some term5 goes here
        </label>
    </div>
    <div class="checkbox" >
        <label>
          <input type="checkbox" ng-model="agreement.term6"> Some term6 goes here
        </label>
    </div>

</div>

Then I have a button below it as follows and I need to enable this button only when all the checkboxes are checked. Please note that this mark up comes in a dynamically loaded modal window. I have tried the way which is posted in this url by doing some basic logic change to make it work as per my need -> How to check if any Checkbox is checked in Angular. It doesn't seems to be working when view is loaded dynamically and watcher throws error in console when it is not able to find it.

<div class="modal-footer">
<button type="button" class="btn btn-primary pull-left" data-dismiss="modal" ng-click="$close();">Confirm</button></div>

Daniel Hutton · Accepted Answer · 2015-05-24 10:06:28Z

As you have it set up currently, this should work:

<button type="button" class="btn btn-primary pull-left" data-dismiss="modal" ng-click="$close();" ng-if="agreement.term1 && agreement.term2 && agreement.term3 && agreement.term4 && agreement.term5 && agreement.term6">Confirm</button>

Using ng-if, the button would only be displayed if all 6 conditions are true.

Another alternative which I personally use is the checklist-model add on. Using this, you can add all of the checkboxes into a single array model, and then just check the length like so:

Give each checkbox the model:

<div class="checkbox" >
        <label>
          <input type="checkbox" checklist-model="agreement" checklist-value="true"> Some term1 goes here
        </label>
    </div>

// Repeat for all checkboxes



<button type="button" class="btn btn-primary pull-left" data-dismiss="modal" ng-click="$close();" ng-if="agreement.length === 6">Confirm</button>

As Paul pointed out, you can also use ng-disabled="agreement.length < 6" instead of ng-if if you wanted to disable the button rather than hide it altogether.

Paul LeBeau · Accepted Answer · 2015-05-24 10:01:23Z

1

Add a function like the following to your scope:

$scope.submitDisabled = function() {
   var allChecked = $scope.agreement.term1 && $scope.agreement.term2 &&
                    $scope.agreement.term3 && $scope.agreement.term4 &&
                    $scope.agreement.term5 && $scope.agreement.term6;
   return !allChecked;
}

Then for you button do:

<button type="button" ... ng-disabled="submitDisabled()">Confirm</button>

This assumes you want the button visible, but disabled, rather than hidden.

answered May 24, 2015 at 10:01

Paul LeBeau

103k10 gold badges173 silver badges204 bronze badges

Comments

Luke P. Issac · Accepted Answer · 2015-05-24 10:34:56Z

Tried several ways but following way had worked for me. Instead of using watcher, I am calling the function on click to the view around the checkbox.

Following is the function:

$scope.agreement.doIfChecked = doIfChecked; 
function doIfChecked(){
    $scope.agreement.isAnyUnchecked = !($scope.agreement.term1 && $scope.agreement.term2 && $scope.agreement.term3 && $scope.agreement.term4 && $scope.agreement.term5 && $scope.agreement.term6);  
}

And I have used ng-click directive to parent div of the input box as follows:

<div class="checkbox" ng-click='agreement.doIfChecked();'>
        <label>
          <input type="checkbox" ng-model="agreement.term1"> Some term1 goes here.
        </label>
    </div>
    <div class="checkbox" ng-click='agreement.doIfChecked();'>
        <label>
          <input type="checkbox" ng-model="agreement.term2"> Some term2 goes here.
        </label>
    </div>

And the mark up for the button goes as below where I am using ng-disabled directive appropriately:

<div class="modal-footer">
<button type="button" class="btn btn-primary pull-left" data-dismiss="modal" ng-disabled="agreement.isAnyUnchecked" ng-click=" $close();">Confirm</button>

Collectives™ on Stack Overflow

How to enable the button only if all the checkboxes are checked in angular.js for a dynamically loaded view

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related