Angular JS: Conditional Enable/Disable Checkboxes

Anghel Leonard

CORE ·

Jan. 20, 15 · Web Dev Zone · Interview

Like (0)

Save

43.11K Views

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>

AngularJS CSS POST (HTTP) Directive (programming)

Published at DZone with permission of Anghel Leonard, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Comments

Angular JS: Conditional Enable/Disable Checkboxes

Popular on DZone

Web Dev Partner Resources