基于复选框更改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; 
}

答

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

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>

答

什么

.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>

基于复选框更改textarea的样式

相关推荐