Menu
I have a div which has many buttons and a main button. I want to disable whole div once main button is clicked. Something like following
<body ng-app>
<div ng-disabled="disableDiv">
<input type="button" value="btn1" >
<input type="button" value="btn2" >
<input type="button" value="btn3" >
<input type="button" value="Main Button" ng-click="disableDiv=true">
</div>
</body>
411
Couple of options include:
Using fieldset instead of div:
var app = angular.module('app', []);<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<body ng-app='app'>
<fieldset ng-disabled="disableDiv">
<input type="button" value="btn1" >
<input type="button" value="btn2" >
<input type="button" value="btn3" >
<input type="button" value="Main Button" ng-click="disableDiv=true">
</fieldset >
</body>Manually disabling:
var app = angular.module('app', []);
app.controller('myController', function($scope) {
$scope.disable = function(evt) {
angular.element(evt.target.parentNode).children().attr('disabled', true);
};
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<body ng-app='app' ng-controller="myController">
<div>
<input type="button" value="btn1" >
<input type="button" value="btn2" >
<input type="button" value="btn3" >
<input type="button" value="Main Button" ng-click="disable($event)">
</div>
</body>ng-disabled on each element
var app = angular.module('app', []);<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<body ng-app='app'>
<div>
<input type="button" value="btn1" ng-disabled="disableDiv">
<input type="button" value="btn2" ng-disabled="disableDiv">
<input type="button" value="btn3" ng-disabled="disableDiv">
<input type="button" value="Main Button" ng-disabled="disableDiv" ng-click="disableDiv=true">
</div>
</body>You can create a function in the controller and set the disabled attribute to each button:
js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.btnDisabled = false;
$scope.disableDiv = function() {
$scope.btnDisabled = true;
}
});
html
<body ng-controller="MainCtrl">
<div>
<input type="button" value="btn1" ng-disabled="btnDisabled">
<input type="button" value="btn2" ng-disabled="btnDisabled">
<input type="button" value="btn3" ng-disabled="btnDisabled">
<input type="button" value="Main Button" ng-click="disableDiv()" ng-disabled="btnDisabled">
</div>
</body>
Plunker
23
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
