How to change CSS when it's ng-disabled?
What Toress answered should work fine but you don't need the help of AngularJS here at all (a native implementation & usage is always best).
You can make use of CSS3 since you already have a class on it. Example:
input.save-changes {
/* some style when the element is active */
}
input.save-changes[disabled] {
/* styles when the element is disabled */
background-color: #ddd;
}
Edit: You can immediately test it on this page of StackOverflow. Just inspect the blue button element and put the disabled
attribute and see it's CSS.
.save-changes {
background-color: red;
padding: 7px 13px;
color: white;
border: 1px solid red;
font-weight: bold;
}
.save-changes[disabled] {
background-color: #FF85A1
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-init="PayoutEnabled = true">
<a href="#" ng-click="PayoutEnabled = !PayoutEnabled">
{{PayoutEnabled ? 'Disable' : 'Enable'}} the below button</a>
<br>
<br>
<input class="save-changes" type="submit" value="PAYOUT" ng-disabled="PayoutEnabled == false" />
</div>
use ng-class
<input type="submit" value="@Translator.Translate("PAYOUT")" class="btn-block
secondary-button save-changes padding-8" ng-disabled="PayoutEnabled==false"
ng-click="PayOut()" ng-class="{'diabled-class': !PayoutEnabled}" />
this will add css class diabled-class
to the input when PayoutEnabled
is false
(!PayoutEnabled is true).
AngularJS adds pseudo-class disabled when ng-disabled is false so i think here is the simplest solution to refer to disabled button :
button:disabled {
color:#717782;
}