Enable/Disable Checkboxes on Dropdown selection in AngularJS using ng-disabled

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

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.

← PreviousNext →