如何在禁用ng时更改CSS？

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?

但即使它被禁用，它也具有与启用相同的类，只是不可点击。我想在禁用时更改背景，以便用户可以看到该按钮被禁用。我怎样才能做到这一点？我是否需要一些禁用ng的CSS类或者还有其他方法吗？

3 个解决方案

#1

use ng-class

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

当PayoutEnabled为false（！PayoutEnabled为true）时，这会将css class diabled-class添加到输入中。

#2

What @KToress answered should work fine but you don't need the help of AngularJS here at all. You can make use of CSS3 since you already have a class on it. Example:

@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;
}

Edit: You can immediately test it on this page of *. Just inspect element and put the disabled attribute on the Blue button and see it's CSS.

编辑：您可以立即在*的此页面上测试它。只需检查元素并将禁用的属性放在蓝色按钮上，然后查看它的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 adds pseudo-class disabled when ng-disabled is false so i think here is the simplest solution to refer to disabled button :

当ng-disabled为false时，AngularJS添加伪类禁用，所以我认为这是引用禁用按钮的最简单的解决方案：

button:disabled {
    color:#717782;
}

#1