I have some checkbox, and a button. Now, I want active button when one or more checkbox is checked. How can I do this in angularjs?
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<label><input type="checkbox" name="check"> First</label>
<label><input type="checkbox" name="check"> Second</label>
<label><input type="checkbox" name="check"> Third</label>
<br>
<button type="button" disabled ng-model="$scope.btn">active/deactive</button>Set ng-model to checkboxes
<label><input type="checkbox" name="check" ng-model="check1"> First</label>
<label><input type="checkbox" name="check" ng-model="check2"> Second</label>
<label><input type="checkbox" name="check" ng-model="check3"> Third</label>
And use ng-disabled to disable\enable button
<button type="button" ng-disabled="!check1 && !check2 && !check3" ng-model="$scope.btn">active/deactive</button>
You can use the ng-disabled directive on the button to add the disable attribute conditionally.
Check the below example where the input check boxes are bound to their respective properties on the controller's scope using the ng-model directive that serves two-way data binding in AngularJS.
Note: If you're having a complex condition to be checked in the view you can write a function and invoke it in the view using a corresponding directive in that situation.
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>
save the values of the checkboxes with ng-model and use them in ng-disabled="!(checkboxValue1 || ch...)"
use ng-model for saving the values and ng-requried="!checkBox2Value && !checkbox3Value" with the checkboxes. Put a form around the checkboxes and use ng-disabled="formName.$invalid"
