Как изменить CSS, когда он отключен?

У меня есть эта button:

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

Но даже когда он отключен, он имеет тот же class что и он, просто не кликабель. Я хочу изменить фон, когда он отключен, чтобы пользователь мог видеть эту кнопку, отключен. Как я могу это сделать? Нужен ли мне какой ng-disabled то ng-disabled класс CSS или есть какой-то другой способ?

Ответ 1

использовать 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}" />

это добавит класс disabled-class css к вводу, когда PayoutEnabled будет false (! PayoutEnabled - true).

Ответ 2

То, что ответил @KToress, должно работать нормально, но вам вообще не нужна помощь AngularJS. Вы можете использовать CSS3, поскольку на нем уже есть класс. Пример:

input.save-changes {
   // some style when the element is active
}

input.save-changes[disabled] {
   // styles when the element is disabled
   background-color: #ddd;
}

Изменить: вы можете сразу протестировать его на этой странице StackOverflow. Просто проверьте элемент и поместите disabled атрибут на синюю кнопку и увидите его 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>

Ответ 3

AngularJS добавляет псевдокласс отключен, когда ng-disabled является ложным, поэтому я думаю, что это самое простое решение для обращения к отключенной кнопке:

button:disabled {
    color:#717782;
}