Angular JS: Conditional Enable/Disable Checkboxes
Join the DZone community and get the full member experience.
Join For FreeIn 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>
Published at DZone with permission of Anghel Leonard, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
Comments