I want a button that is only enabled if at least one of a group of checkboxes is checked, similiar to the fiddle at http://jsfiddle.net/chriscoyier/BPhZe/76:
var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");
checkboxes.click(function() {
submitButt.attr("disabled", !checkboxes.is(":checked"));
});
I want to implement this using AngularJs.
Add a function to your controller that checks if any of the check boxes are checked. If the radio button is checked its value will be true. Then, in the HTML use the ng-disabled directive on your button and set it equal to the result of your function. Example:
Controller:
$scope.isCheckboxChecked = function() {
return ($scope.checkbox1 || $scope.checkbox2 || $scope.checkbox3);
}
HTML:
<button type="button" ng-disabled="!isCheckboxChecked()">My Button</button>
It would be helpful if you posted the code you have already tried. My answer is assuming you already have functional check boxes using the ng-model directive and are just looking for how to disable the button when any of them are checked.
Update:
If you don't already have your checkboxes binding to your controller, here is an example. Note the use of ng-model to bind to a $scope.checkbox1 or $scope.checkbox2 variable in your scope.
<input type="checkbox" ng-model="checkbox1">Checkbox 1
<input type="checkbox" ng-model="checkbox2">Checkbox 2
Assuming that your form consists of a long list of check boxes, then alternatively you can create the list in the Controller's $scope and then iterate each check box items along with specific properties such as its label and its state(model) where it is checked or not. Next is to create a function that determines if any of the check box in the check box list has its state checked(isChecked).
Controller
controller('Controller', function($scope) {
$scope.checkBoxes = [
{label: 'Option 1', isChecked: false},
{label: 'Option 2', isChecked: false},
{label: 'Option 3', isChecked: false},
{label: 'Option 4', isChecked: false},
{label: 'Option 5', isChecked: false}
];
$scope.isChecked = function() {
for(var e in $scope.checkBoxes) {
var checkBox = $scope.checkBoxes[e];
if(checkBox.isChecked)
return true;
}
return false;
};
});
At this point, you can iterate the check box list in your form and fill up properties(e.g. label) and its respective models(isChecked) in each check box.
HTML
<form ng-controller="Controller">
<div ng-repeat="checkBox in checkBoxes">
<input type="checkbox" ng-model="checkBox.isChecked" id="check-box-{{$index}}" />
<label ng-bind="checkBox.label" for="check-box-{{$index}}"></label>
</div>
<div>
<input type="submit" value="do thing" ng-disabled="!isChecked()" />
</div>
</form>
this could be a solution but it's not easy to understand what you are searching for
<h1>Button should be enabled if at least one checkbox is checked</h1>
<form>
<div>
<input type="checkbox" name="option-1" id="option-1" ng-click="check()"> <label for="option-1">Option 1</label>
</div>
<div>
<input type="checkbox" name="option-2" id="option-2" ng-click="check()"> <label for="option-2">Option 2</label>
</div>
<div>
<input type="checkbox" name="option-3" id="option-3"> <label for="option-3" ng-click="check()">Option 3</label>
</div>
<div>
<input type="checkbox" name="option-4" id="option-4"> <label for="option-4"ng-click="check()">Option 4</label>
</div>
<div>
<input type="checkbox" name="option-5" id="option-5"> <label for="option-5" ng-click="check()">Option 5</label>
</div>
<div>
<input type="button" ng-click="checkboxes" ng-disabled="enabled" value="Do thing" disabled>
</div>
</form>
$scope.enabled=true
$scope.check=function(){
$scope.enabled=false
}
$scope.checkboxes=function() {
});
Finally it is done. I have done it using grep in jQuery.
$scope.userSelectionChanged = function () {
$scope.enableAddBtn = $.grep($scope.userlists, function (user) {
return user.IsSelected;
}).length >= 1;
};
