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

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

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>





Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:
java ,html5 ,javascript ,tips and tricks

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

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}