सीएसएस को एनजी-अक्षम होने पर कैसे बदलें?

Question

मैं इस 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 सीएसएस क्लास चाहिए या कोई अन्य तरीका है?

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

यह इनपुट के लिए सीएसएस वर्ग diabled-class जोड़ देगा जब PayoutEnabledfalse है (! PayoutEnabled सच है)।

Answer 2

क्या @KToress ने ठीक काम करना चाहिए, लेकिन आपको यहां AngularJS की सहायता की आवश्यकता नहीं है। आप सादे सीएसएस का उपयोग कर सकते हैं क्योंकि आपके पास पहले से ही एक कक्षा है। उदाहरण:

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 विशेषता दें और इसे सीएसएस देखें।

.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 छद्म वर्ग कहते हैं विकलांग जब एनजी-विकलांगझूठी है तो मैं यहाँ लगता है आसान समाधान विकलांग बटन का उल्लेख करने के लिए है:

button:disabled { 
    color:#717782; 
}