Angularjs ng-disabled button for several checkbox input

Question

I have the following plunler :

http://plnkr.co/edit/ZJq0Qy3j5nGr1eJ9f9QA?p=preview

What I'd like to do is to enable the button if at least one checkbox is checked.

<button class="btn btn-danger" ng-click="removeSelectedRows()">Remove Selected Rows</button>

This works great :

<button ng-disabled="mySwitch">Click</button>
<input type="checkbox" ng-model="mySwitch">

but when I apply it to my example, it does nothing.

Any advice ?

shershen · Accepted Answer · 2015-11-08 16:38:01Z

1

Please check this plunk : http://plnkr.co/edit/WpK2KXtAJC3gfl8MoMlZ?p=preview

You can run checks if any of the items in the model is true using $scope.$watch function:

 $scope.$watch('tableSelection', function(val){
    if(val){ //if value is not empty
      $scope.disableRemoveButton = true;
      for (var i in val){ //iterate props of the Object
        if(val.hasOwnProperty(i)){ //only needed props
          if(val[i] == true) { 
          $scope.disableRemoveButton = false;
          }
        }
        }
      }
  }, true)

We also introduce additional flag $scope.disableRemoveButton that is being changed in case if there's true value in model. That corresponds to <button class="btn btn-danger" ng-disabled="disableRemoveButton" in the template.

answered Nov 8, 2015 at 16:38

shershen

10k11 gold badges44 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angularjs ng-disabled button for several checkbox input

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related