チェックボックスに基づいてテキストエリアのスタイルを変更

チェックボックスをオンにしてテキストエリアが空の場合、テキストエリアのスタイルを変更したいと思います。赤い枠線が表示されます。チェックボックスに基づいてテキストエリアのスタイルを変更

テキストエリアが空でなく、チェックボックスがオフの場合、枠線が消えるはずです。

私はこれを試しましたが、テキストエリアが空でない場合でも境界線が表示されます。

<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、境界線はを消えるはずです。

エラーを指摘できますか？

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

チェックボックスに基づいてテキストエリアのスタイルを変更

答えて

関連する問題