Angular JS: Conditional Enable/Disable Checkboxes
Angular JS: Conditional Enable/Disable Checkboxes
Join the DZone community and get the full member experience.
Join For FreeJumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.
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>
Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.
Like This Article? Read More From DZone
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.linkDescription }}
{{ parent.urlSource.name }}