Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Angular JS: Conditional Enable/Disable Checkboxes

DZone's Guide to

Angular JS: Conditional Enable/Disable Checkboxes

· Web Dev Zone ·
Free Resource

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

In this post you can see an approach for conditionally enabling/disabling a set of checkboxes. For this we can use the ng-disabled directive and some CSS clases of typeclassName-true and className-false:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../angular/angular.min.js"></script>
    <link href="../bootstrap/css/bootstrap.css" rel="stylesheet"/>
    <link href="../bootstrap/css/bootstrap-theme.css" rel="stylesheet"/>
    <style>
        .check-disabled-true {
            color: gray
        }

        .check-disabled-false {
            color: black
        }
    </style>
    <script>
        angular.module("atpModule", [])
                .controller("atpCtrl", function ($scope) {
                    $scope.selectedPrizemoney = 'Select one prize money';
                    $scope.isdisabled=true;
                    $scope.atp = [
                        { name: 'Nadal, Rafael (ESP)', rank: 1, age: '28', prizemoney: 66149345 },
                        { name: 'Djokovic, Novak (SRB)', rank: 2, age: '27', prizemoney: 70704129 },
                        { name: 'Federer, Roger (SUI)', rank: 3, age: '33', prizemoney: 84827704 },
                        { name: 'Wawrinka, Stan (SUI)', rank: 4, age: '29', prizemoney: 13155060 },
                        { name: 'Ferrer, David (ESP)', rank: 5, age: '32', prizemoney: 24034072 },
                        { name: 'Tsonga, Jo-Wilfried (FRA)', rank: 11, age: '29', prizemoney: 1708240 },
                        { name: 'Simon, Gilles (FRA)', rank: 26, age: '29', prizemoney: 760469 },
                        { name: 'Lopez, Feliciano (ESP)', rank: 20, age: '33', prizemoney: 1100579 },
                        { name: 'Benneteau, Julien (FRA)', rank: 28, age: '32', prizemoney: 617688 },
                        { name: 'Verdasco, Fernando (ESP)', rank: 33, age: '30', prizemoney: 689219 },
                        { name: 'Mayer, Leonardo (ARG)', rank: 25, age: '27', prizemoney: 946294 }
                    ];

                    $scope.shouldBeDisabled = function (item) {
                        if (item.prizemoney <= $scope.selectedPrizemoney) {                          
                            return true;
                        } else {                          
                            return false;
                        }
                    };
                });
    </script>
</head>
<body>
<div ng-app="atpModule" ng-controller="atpCtrl">

    <div id="atpPanel" class="panel">
        <h4 class="panel-header">ENABLE/DISABLE CHECKBOXES USING ANGULAR JS</h4>
        <hr/>
        <h5 class="panel-header">Select the maximum prize money:</h5>
        <select ng-model="selectedPrizemoney">
            <option>Select one prize money</option>
            <option ng-repeat="item in atp">{{item.prizemoney}}</option>
        </select>
        <hr/>
        <div ng-repeat="item in atp">
            <p class="check-disabled-{{shouldBeDisabled(item)}}">
                <input type="checkbox" name="{{item.name}}" 
                     value="{{item.name}}" ng-disabled="shouldBeDisabled(item)">{{item.name}}
            </p>
        </div>
    </div>
</div>
</body>
</html>





Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Topics:
java ,html5 ,javascript ,tips and tricks

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}