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>

Answer 1

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.

Answer 2

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.

Answer 3

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>