根据复选框更改文本区域的样式答案

【问题标题】：Change style of textarea based on checkbox根据复选框更改文本区域的样式
【发布时间】：2018-03-25 03:43:43
【问题描述】：

如果选中复选框并且文本区域为空，我想更改文本区域的样式。应该会出现一个红色边框。

如果 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;
}

【问题讨论】：

标签： html css angularjs checkbox

【解决方案1】：

怎么样

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

【讨论】：

【解决方案2】：

它正在按照您的要求工作......

1.如果一个复选框被选中并且文本区域是empty。红色边框应该出现。

2.如果文本区域不是empty并且复选框未选中，则边框应该消失。

你能指出错误吗？？

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

【讨论】：