保存按鈕被禁用時，如何在引導按鈕上更改樣式？

我正在使用btn-btn-primary類的引導程序進行按鈕樣式設置，但是當窗體無效時，按鈕被禁用，並且淡藍色和灰色背景與啓用時沒有足夠的區別。我如何在兩種情況下更改背景顏色和字體？保存按鈕被禁用時，如何在引導按鈕上更改樣式？

main.html中

<form name="createProcessFormName" id="createProcessForm" role="form" class="form-horizontal"> 
    <div class="panel-body formHeight"> 
     <!--<p class="text-danger" ng-show="createProcessFormName.$dirty && createProcessFormName.$invalid">{{validationMessage}}</p>--> 
     <div class="row"> 
      <div class="form-group col-md-6 fieldHeight"> 
       <label for="name" class="col-md-5 required">Business 
       Name:</label> 
       <div class="col-md-7"> 
       <input type="text" class="form-control" id="name" 
       ng-model="DTO.LongName" ng-model-options="{updateOn: 'blur'}" 
       placeholder="Name" maxlength="1024" name="Name" 
       required> 
       <p class="text-danger" ng-show="createProcessFormName.processName.$touched && createProcessFormName.processName.$error.required">Business Process Name is required</p> 
      </div> 
     </div> 
    </div> 
</form> 

    <button ng-hide="edit" ng-disabled="createFormName.$invalid" class="btn btn-primary pull-right" type="button" ng-click="submit()">Save</button>

來源

2015-08-20 aftab

使用不同顏色的有效和無效？例如，如果您的表單無效，請將該按鈕更改爲紅色/默認並將其禁用。這應該在啓用（藍色，明亮）和禁用（紅色或灰色，光線）之間產生足夠的對比。除此之外，你可以在''bootstrap.css'之後用* .css'覆蓋按鈕樣式。這些只是一些建議，需要研究。 –

你最好的選擇是使用:invalid僞類。

表單填寫完所有必填字段後，表單將不再有效，因此按鈕應回到正常狀態。

form + button.btn.btn-primary { 
 
    background: blue; 
 
} 
 
form:invalid + button.btn.btn-primary { 
 
    background: red; 
 
}

<form> 
 
    <input type="text" required /> 
 
</form> 
 

 
<button ng-hide="edit" ng-disabled="createFormName.$invalid" class="btn btn-primary pull-right" type="button" ng-click="submit()">Save</button>

來源

2015-08-20 14:04:45 Stewartside

感謝您的回覆我的按鈕是在窗體外，我用這些類，你在CSS中提到，但我沒有看到任何顏色的影響。 – aftab

我編輯我的問題，並添加表單。 – aftab

不幸運！如果這個CSS是bootstrap.css或我可以將其dd到任何CSS文件 – aftab

我建議使用納克級https://docs.angularjs.org/api/ng/directive/ngClass

這將增加基於condtion CSS類。

當createFormName。$無效是真實的，它會從你的CSS應用invalidCssClassName

。

當createFormName。$無效是假的，它會從你的CSS刪除invalidCssClassName

。

<button ng-hide="edit" ng-disabled="createFormName.$invalid" class="btn btn-primary pull-right" type="button" ng-class="{invalidCssClassName:createFormName.$invalid}" ng-click="submit()">Save</button>

來源

2015-08-20 14:15:03 Viraj

我可以得到一些基於我的代碼的例子對不起，我仍然是新的AngularJs。。這將是很大的幫助，謝謝 – aftab

你可以檢查這個視頻關於Angular JS Fundamentals http://weblogs.asp.net/dwahlin/video-tutorial-angularjs-fundamentals-in-60-ish-minutes – Viraj

保存按鈕被禁用時，如何在引導按鈕上更改樣式？

回答

相關問題