基於複選框更改textarea的樣式

如果複選框被選中且textarea爲空，我想更改textarea的樣式。應該出現紅色邊框。基於複選框更改textarea的樣式

如果textarea不是空的，並且未選中複選框，邊框應該消失。

我已經嘗試過這樣的事情，但即使textarea不爲空，也會顯示邊框。

<input style="display: inline;" id="checkbox1" type="checkbox" ng-model="checked"> 

<textarea name="" id="" cols="5" rows="3" ng-model="comments" ng-disabled="request.disableTransfer" ng-pattern="/^[0-9A-Za-z]*$/" ng-required="checked"></textarea>

這是CSS部分：

textarea.ng-invalid { 
    border: 3px solid #cc4b37 !important; 
}

來源

2017-10-13 Shaam

它正在按您的要求......

1.如果一個複選框檢查和文本區域是空的。紅色邊框出現。

2.如果textarea的不空和複選框未選中，邊界應該消失。

你能指出錯誤嗎？

<!DOCTYPE html> 
 
<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
<style> 
 
textarea.ng-invalid { 
 
    border: 3px solid #cc4b37 !important; 
 
} 
 
</style> 
 
<body> 
 

 
<div ng-app="" ng-init="firstName='John'"> 
 

 
<input style="display: inline;" id="checkbox1" type="checkbox" ng-model="checked"> 
 

 
<textarea name="" id="" cols="5" rows="3" ng-model="comments" ng-disabled="request.disableTransfer" ng-pattern="/^[0-9A-Za-z]*$/" ng-required="checked"></textarea> 
 
    
 

 
</div> 
 

 
</body> 
 
</html>

來源

2017-10-13 04:34:42

什麼

.invalid-input { 
    border: 3px solid #cc4b37 !important; 
} 



<textarea ng-class="{'invalid-input': (!comments || comments == '')&& checked }" id="" cols="5" rows="3" ng-model="comments" 
ng-disabled="request.disableTransfer" ng-pattern="/^[0-9A-Za-z]*$/" ng-required="checked"></textarea>

來源

2017-10-13 04:34:23 jitender

基於複選框更改textarea的樣式

回答

相關問題