CODEWITHSUNDEEP
angularjs
Trilok Pathak
Trilok Pathak

Reputation: 3111

Angular JS + Button should be enabled if at least one checkbox is checked how To do it?

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.

Upvotes: 2

Views: 10749

Answers (4)

Trilok Pathak
Trilok Pathak

Reputation: 3111

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;
 };

Upvotes: 0

ryeballar
ryeballar

Reputation: 30118

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).

Plunker DEMO

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>

Upvotes: 4

jsparks
jsparks

Reputation: 1030

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

Upvotes: 5

mautrok
mautrok

Reputation: 961

this could be a solution but it's not easy to understand what you are searching for

HTML

<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>

JS

$scope.enabled=true

$scope.check=function(){
    $scope.enabled=false
}

$scope.checkboxes=function() {

});

Upvotes: 1

Related Questions