Menu
I am trying to disable a group of element using ng-disabled in its parent element. Doesn't seem to work. Does it mean I have to using same condition in all child element to disable ?
I am not able to disable all elements by putting ng-disabled="true" with ul or li element. It works only when I put at input element. Is this how it works ? Also ng-disabled="true" doesn't work with lable or span !
<ul style="list-style:none">
<li>
<input type="radio" id="radio1" ng-model="color" value="red">
<label for="radio1" class=""><span>Red</span></label>
</li>
<li>
<input type="radio" id="radio2" ng-model="color" value="green">
<label for="radio2" class=""><span>Green</span></label>
</li>
<li>
<input type="radio" id="radio3" ng-model="color" value="blue">
<label for="radio3" class=""><span>Blue</span></label>
</li>
fiddle : http://jsfiddle.net/chiranjib_halder1/pqvz9veu/3/
697
You can use this directive: https://github.com/pleerock/angular-disable-all.git that basicaly picks the elements inside the directive and disable them.
here is your fiddle code using this directive:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script src="https://cdn.rawgit.com/pleerock/angular-disable-all/master/dist/angular-disable-all.min.js"></script>
<body ng-app="radioExample">
<script>
angular.module('radioExample', ['disableAll'])
.controller('ExampleController', ['$scope', function($scope) {
$scope.color = 'blue';
$scope.specialValue = {
"id": "12345",
"value": "green"
};
}]);
</script>
<div ng-controller="ExampleController">
<input type="checkbox" ng-model="isDisabled">Disable all<br>
<ul style="list-style:none" disable-all="isDisabled">
<li>
<input type="radio" id="radio1" ng-model="color" value="red">
<label for="radio1" class=""><span>Red</span></label>
</li>
<li>
<input type="radio" id="radio2" ng-model="color" value="green">
<label for="radio2" class=""><span>Green</span></label>
</li>
<li>
<input type="radio" id="radio3" ng-model="color" value="blue">
<label for="radio3" class=""><span>Blue</span></label>
</li>
<tt>color = {{color | json}}</tt><br/>
<button type="button">Click Me!</button>
</ul>
</div>
</body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
