Ändern Sie den Stil von Textbereich basierend auf Checkbox

Ich möchte den Stil eines Textbereiches ändern, wenn ein Kontrollkästchen aktiviert ist und der Textbereich leer ist. Ein roter Rahmen sollte erscheinen.Ändern Sie den Stil von Textbereich basierend auf Checkbox

Wenn der Textbereich nicht leer ist und das Kontrollkästchen nicht aktiviert ist, sollte der Rahmen verschwinden.

Ich habe so etwas versucht, aber die Grenze wird angezeigt, auch wenn das Textfeld nicht leer ist.

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

Dies ist der CSS-Teil:

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

Quelle

2017-10-13 Shaam

Es wird nach Ihren Wünschen arbeiten ...

1. Wenn ein Kontrollkästchen ist überprüft und das Textfeld ist leer. Ein roter Rand sollte erscheinen.

2. Wenn das Textfeld nicht leer ist und die Checkbox nicht geprüft, sollte die Grenze verschwinden.

Konnten Sie den Fehler zeigen?

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

Quelle

2017-10-13 04:34:42

Was

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

Quelle

2017-10-13 04:34:23 jitender

Ändern Sie den Stil von Textbereich basierend auf Checkbox

Antwort

Verwandte Themen