How to change CSS when it's ng-disabled?

Question

I have this button:

<input type="submit" value="@Translator.Translate("PAYOUT")"      class="btn-block secondary-button save-changes padding-8"      ng-disabled="PayoutEnabled==false" ng-click="PayOut()" /> 

But even when it's disabled it has the same class as it's enabled, just not clickable. I want to change background when it's disabled so that user can see that button, is disabled. How can I do that? Do I need some ng-disabled CSS class or there is some other way?

Answer 1

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>

Answer 2

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).