Come cambiare CSS quando è disabilitato?

Question

Ho questo button:

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

Ma anche quando è disabilitata ha lo stesso class come è abilitata, solo che non cliccabile. Voglio cambiare sfondo quando è disabilitato in modo che l'utente possa vedere quel pulsante, è disabilitato. Come lo posso fare? Ho bisogno di qualche classe CSS ng-disabled o c'è un altro modo?

Answer 1

uso 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}" /> 

questo aggiungerà classe CSS diabled-class all'ingresso quando PayoutEnabled è false (! PayoutEnabled è vero).

Answer 2

Quale risposta a @KToress dovrebbe funzionare correttamente ma non è necessario l'aiuto di AngularJS qui. Puoi usare semplicemente CSS dato che hai già una lezione su di esso. Esempio:

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

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

Edit: vedrete subito testarla in questa pagina del StackOverflow. Basta controllare l'elemento e inserire l'attributo disabled sul pulsante Blu e vederlo è 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 3

AngularJS aggiunge pseudo-classe disabilitato quando ng-disabled è falso quindi penso che qui è la soluzione più semplice per fare riferimento a portatori di handicap pulsante:

button:disabled { 
    color:#717782; 
}