如何在禁用CSS时更改CSS?

时间:2015-07-03 11:47:52

标签: css angularjs

我有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类还是有其他方法?

4 个答案:

答案 0 :(得分:38)

@KToress回答的应该可以正常工作但你根本不需要AngularJS的帮助。你可以使用CSS3,因为你已经有了一个类。例如:

userParameters

编辑:您可以在StackOverflow的此页面上立即对其进行测试。只需检查元素并将input.save-changes { // some style when the element is active } input.save-changes[disabled] { // styles when the element is disabled background-color: #ddd; } 属性放在蓝色按钮上,然后看它是CSS。

disabled
.save-changes {
  background-color: red;
  padding: 7px 13px;
  color: white;
  border: 1px solid red;
  font-weight: bold;
}
.save-changes[disabled] {
  background-color: #FF85A1
}

答案 1 :(得分:19)

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

diabled-classPayoutEnabled时,这会将css类false添加到输入中(!PayoutEnabled为true)。

答案 2 :(得分:9)

ng-disabled false 时,AngularJS会添加伪类禁用,所以我认为这是引用禁用按钮的最简单方法:

var array = {};

  if (array[key].config.tmp == undefined) {
               array[key].config.tmp = {}
            }
            if(array[key].config.tmp.tp1){

            }
            if(array[key].config.tmp.tp2){

            }
            if(array[key].config.tmp.tp3){

            }
            if(array[key].config.tmp.tp4){

            }

答案 3 :(得分:0)

如果您使用的是search()和比temp更新的Bootstrap版本,则可以使用默认样式将其添加到Angular文件中

AngularJs

不透明度越高,颜色将越深或更纯。