AngularJS ng-disabled Example - How to Enable or Disable Multiple Checkboxes Based on Dropdown Selection in AngularJS

I am sharing a simple example here today that explains how to enable or disable multiple checkboxes based on selections in a dropdown list in AngularJS. I am using an HTML5 <select> element in my example and I’ll bind JSON data to the <select> element from AngularJS controller.

I have previously posted a similar solution (example) using plain JavaScript and jQuery. It might be useful.

The Markup and the Controller

My view has three checkboxes along with a <select> element. I’ll call a function, which I have written in my controller through the ng-change directive. Whenever, a user selects a value from the dropdown list, the on change event will call the function to enable or disable the checkboxes.

<!DOCTYPE html>
<html>
<head>
    <title>Enable/Disable Checkbox on Dropdown Selection - AngularJS Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" 
        ng-controller="myController">

        <!--THE SELECT ELEMENT.-->
        <select ng-model="item" 
            ng-options="prod.name for prod in products" 
            ng-change="updateCheckBox()"
            id="prod">

            <option value="">-- Select --</option>
        </select>

        <p>
            <!--BY DEFAULT, ALL CHECKBOXES REMAINS DISABLED.-->
            <input type="checkbox" name="offer" ng-disabled="!enableMe" id="chk1" /> Exchange Offer <br />
            <input type="checkbox" name="offer" ng-disabled="!enableMe" id="chk2" /> Gift Voucher <br />
            <input type="checkbox" name="offer" ng-disabled="!enableMe" id="chk3" /> Free UPS
        </p>
    </div>
</body>

<script>
    angular.module("myApp", [])
        .controller('myController', ['$scope', function ($scope) {

            // CREATE A "products" OBJECT (JSON).
            $scope.products = [
                { 'name': 'HP' },
                { 'name': 'IBM' },
                { 'name': 'Lenovo' }
            ];

            $scope.updateCheckBox = function () {

                // I HAVE SET CONDITION TO CHECK IF SELECTED PRODUCT IS "IBM", 
                // THEN ENABLE ALL CHECKBOXES OR ELSE DISABLE ALL.

                if ($scope.item != null) {
                    if ($scope.item.name == "IBM")
                        $scope.enableMe = true;
                    else
                        $scope.enableMe = false;
                }
                else
                    $scope.enableMe = false;
            };
        } ]);
</script>
</html>
Try it

In the controller, I am first creating an object called products using JSON data. It just has one header called name with some values in it. Next, I have written a function called updateCheckBox(). The ng-change directive (that I have added to the <select> element in the markup section) calls this function when a user selects a value from list.

Inside the function, it checks the value. I have set a condition and it accordingly checks for a specified value before enabling or disabling the checkboxes.

Also, see this Demo

Exchange Offer
Gift Voucher
Free UPS

{{msg}}

Enable or Disable Checkbox without any Condition

Here’s another way you can disable or enable checkboxes on dropdown selection, without any condition. In the previous example above, I have written a function in my controller that checks if a certain condition is met before updating the checkboxes.

However here, you do not need any function in your controller and don’t have to add ng-change directive to the <select> element. You can simply do this...

<select ng-model="item" 
    ng-options="prod.name for prod in products" 
    id="prod">

    <option value="">-- Select --</option>
</select>
<p>
    <input type="checkbox" name="offer" ng-disabled="!item" id="chk1" /> Exchange Offer <br />
    <input type="checkbox" name="offer" ng-disabled="!item" id="chk2" /> Gift Voucher <br />
    <input type="checkbox" name="offer" ng-disabled="!item" id="chk3" /> Free UPS
</p>

I am using a Boolean logic (that is true or false) in the checkboxes. True if you have selected a value (any value) or false if you do not select any value.

ng-disabled="!item"

In addition, your script will just have the JSON data initialization.

<script>
    angular.module("myApp", [])
        .controller('myController', ['$scope', function ($scope) {

            $scope.products = [
                { 'name': 'HP' },
                { 'name': 'IBM' },
                { 'name': 'Lenovo' }
            ];
        } ]);
</script>

Now, irrespective what your user selects from the dropdown list, it would enable the checkbox when they select a (any) value and disable the checkboxes when they do not select any value (or simply chooses –Select--).

Conclusion

You have learned couple of things in this article. First, you have learned how to bind JSON data to a <select> element and next two different ways to disable or enable a group of checkboxes on dropdown list selection. In the first method, I have a function in my controller with a condition and in the second method I am using a Boolean logic in my view itself.

Don’t forget to share it with your friends on Facebook, twitter etc. Thanks for reading.

← PreviousNext →



Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.

Enter your email id

Delivered by FeedBurner

Related Posts: