禁用 ng 时如何更改 CSS？

Posted 2023-02-19

【中文标题】禁用 ng 时如何更改 CSS？

【英文标题】：How to change CSS when it's ng-disabled?

【发布时间】：2015-09-21 06:05:38

【问题描述】：

我有这个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 CSS 类还是有其他方法？

【参考方案1】：

Toress 的回答应该可以正常工作，但您根本不需要 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;

编辑：您可以立即在 *** 的这个页面上对其进行测试。只需检查蓝色按钮元素并放置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>

【讨论】：

这是对我有用的答案。我将 ng-disabled="disabled" 放入我的 html 和 i.fa-refresh[disabled] color: #ccc; 进入我的 CSS

很高兴这对您有所帮助！

已确认。第一个解决方案对我不起作用。这确实

【参考方案2】：

使用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" />

当PayoutEnabled 为false（！PayoutEnabled 为真）时，这将向输入添加 css 类 diabled-class。

【参考方案3】：

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

button:disabled 
    color:#717782;

【讨论】：

最好添加一些注释，而不是随便乱扔代码。

正确，值得一提的是它不适用于IE8及更低版本，很多人仍在使用。

感谢您的解决方案。恕我直言，2018 年我们可以跳过 IE8 支持。但是使用 :disabled 而不是 [disabled] ？哪种解决方案更清洁？为什么？

【参考方案4】：

如果您使用的是Bootstrap 和比AngularJs 更新的Angular 版本，您可以覆盖默认样式，将其添加到styles.css 文件中

.btn.disabled, .btn:disabled 
    opacity: .35 !important;
    background-color: gray !important;

不透明度越高，颜色越深或越纯色。