Modifier le style de zone de texte en fonction de la case à cocher

Je voudrais changer le style d'une zone de texte si une case est cochée et que la zone de texte est vide. Une bordure rouge devrait apparaître.Modifier le style de zone de texte en fonction de la case à cocher

Si la zone de texte n'est pas vide et que la case n'est pas cochée, la bordure devrait disparaître.

J'ai essayé quelque chose comme ça, mais la bordure est affichée même quand la zone de texte n'est pas vide.

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

Ceci est la partie css:

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

Source

2017-10-13 Shaam

Il fonctionne selon vos besoins ...

1. Si une case à cocher est vérifié et la zone de texte est vide. Une bordure rouge doit apparaître .

2. Si le textarea n'est pas vide et la case est cochée pas, la frontière devrait disparaître .

Pourriez-vous pointer l'erreur?

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

Source

2017-10-13 04:34:42

Qu'en est-

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

Source

2017-10-13 04:34:23 jitender

Modifier le style de zone de texte en fonction de la case à cocher

Répondre

Questions connexes