Utilize the ng-disabled
directive on the button to dynamically add the disable attribute.
Take a look at the following example where the checkboxes are linked to their respective properties on the controller's scope using the ng-model
directive for two-way data binding in AngularJS.
Keep in mind: If you have a complex condition to evaluate in the view, consider creating a function and calling it in the view using an appropriate directive.
angular
.module('demo', [])
.controller('DefaultController', DefaultController);
function DefaultController() {
var vm = this;
vm.disableButton = disableButton;
function disableButton() {
if (vm.first || vm.second || vm.third) {
return false;
} else {
return true;
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<div ng-app="demo">
<div ng-controller="DefaultController as ctrl">
<label><input type="checkbox" name="check" ng-model="ctrl.first"> First</label>
<label><input type="checkbox" name="check" ng-model="ctrl.second"> Second</label>
<label><input type="checkbox" name="check" ng-model="ctrl.third"> Third</label>
<br>
<button type="button" ng-disabled="ctrl.disableButton()">active/deactive</button>
</div>
</div>