J'essaie d'appliquer le css ('color', 'red') sur le champ de saisie avec l'ID "pred" lorsque la case est cochée. Actuellement, le code parvient à désactiver le champ de saisie lorsqu'il est coché, mais pour une raison quelconque, je ne parviens pas à comprendre comment appliquer le style dans le même code.
Je sais comment le faire avec une fonction distincte, mais j'aimerais savoir comment faire dans ce code et apprenez ce que je fais de mal.
$('pred').css('color','red')
Code court:
onclick="var input = document.getElementById('pred'); if(this.checked) {
input.disabled = true;
input.css('color','red');}else{input.disabled=false; input.focus();
}
L'erreur pour cette version est input.css n'est pas une fonction.
Si je le fais comme ça, je n'obtiens aucune erreur mais rien ne se passe.
<div class="w3-row">
<div class="w3-col s1">
<label>Za predmet:</label>
<input class="w3-input w3-border w3-light-grey" type="text" required placeholder="Naš broj" style="width: 90%;" name="pred" id="pred" />
</div>
<div class="w3-col s3">
<div style="padding-top: 20px;">
<input class="w3-check" type="checkbox" id="predsvi" name="predsvi" value="da" onclick="var input = document.getElementById('pred'); if(this.checked){ input.disabled = true; input.css('color','red');}else{input.disabled=false; input.focus();}">
<label for="predsvi"> Sve predmete</label>
</div>
</div>
</div>
3 Réponses :
Changer la propriété couleur d'un élément désactivé n'a pas de sens. Je pense que vous voulez changer la couleur de espace réservé .
Remarque: l'utilisation de JavaScript en ligne n'est pas une bonne pratique.
puis essayez la méthode suivante:
<div class="w3-row">
<div class="w3-col s1">
<label>Za predmet:</label>
<input class="w3-input w3-border w3-light-grey" type="text" required placeholder="Naš broj" style="width: 90%;" name="pred" id="pred" />
</div>
<div class="w3-col s3">
<div style="padding-top: 20px;">
<input class="w3-check" type="checkbox" id="predsvi" name="predsvi" value="da" onclick="myFunc(this)">
<label for="predsvi"> Sve predmete</label>
</div>
</div>
</div>
.el-color::placeholder {
color: red;
}
function myFunc(el){
var input = document.getElementById('pred');
if(el.checked){
input.disabled = true;
input.focus();
input.classList.add('el-color');
}
else{
input.disabled=false;
input.classList.remove('el-color');
}
}
Vous faites un point, et cela fonctionne. Mais je jouais pour voir puis-je le changer même si l'utilisateur saisissait quelque chose. Quoi qu'il en soit, ma façon et la vôtre fonctionnent. MAIS j'ai un autre style! Important qui s'applique à ce champ qui remplace cela et c'est pourquoi rien n'a changé. J'ai essayé de rendre cette couleur! importante mais ne fonctionne toujours pas. JS fonctionne si mal le marquer comme réponse de toute façon. Comme un changement d'espace réservé serait plus approprié.
@ikiK, je ne suis pas si sûr du comportement prédominant sans en faire l'expérience, bien que l'utilisation de psedu-selector soit parfois délicate, de toute façon bonne chance :)
Comme suggéré ici stackoverflow.com/questions/11178673/how-to-override -importa nt Puis-je avoir plusieurs sélecteurs appliqués d'une manière ou d'une autre à cela pour le restreindre afin de remplacer cela! important?
En fait, peu importe qu'il fonctionne maintenant avec votre dernière modification! Merci.
Remplacez-le par:
<div class="w3-row">
<div class="w3-col s1">
<label>Za predmet:</label>
<input class="w3-input w3-border w3-light-grey" type="text" required placeholder="Naš broj" style="width: 90%;" name="pred" id="pred" />
</div>
<div class="w3-col s3">
<div style="padding-top: 20px;">
<input class="w3-check" type="checkbox" id="predsvi" name="predsvi" value="da" onclick="var input = document.getElementById('pred'); if(this.checked){ input.disabled = true; input.focus(); input.style.color= 'red';}else{input.disabled=false;}">
<label for="predsvi"> Sve predmete</label>
</div>
</div>
</div>
le problème était dans input.css () et l'erreur est que l'utilisation du .css n'est pas une fonction dans HTMLInputElement.onclick la couleur rouge apparaîtra après avoir commencé à taper.
Oui, vous avez raison à ce sujet aussi, merci pour votre contribution.
Utilisez l'événement onchange pour détecter les modifications de la case à cocher.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="w3-row">
<div class="w3-col s1">
<label>Za predmet:</label>
<input class="w3-input w3-border w3-light-grey" type="text" required placeholder="Naš broj" style="width: 90%;" name="pred" id="pred" />
</div>
<div class="w3-col s3">
<div style="padding-top: 20px;">
<input class="w3-check" type="checkbox" id="predsvi" name="predsvi" value="da">
<label for="predsvi"> Sve predmete</label>
</div>
</div>
</div>
$(document).ready(function () {
$('#predsvi').change(function () {
let inputField = $('#pred');
if (this.checked) {
inputField.css('color', 'red');
}
else {
inputField.focus();
}
inputField.attr('disabled', this.checked);
});
});
vérifiez votre identifiant, pred n'est pas là!
Dernier en ligne: id = "pred" ...
votre zone de saisie est pred mais votre case à cocher est predsvi
inputest un élément HTML et en tant que tel n'a pas de méthode.css. Essayez plutôtvar input = $ ('# pred'). Vous devrez modifier vos vérifications.disabledmais l'ajout de styles sera plus facile si vous utilisez un objet jQueryEn fait, je l'ai compris, j'ai un autre style! Important qui s'applique à ce domaine et c'est pourquoi il échoue, quand je supprime cela! Important, cela fonctionne. Le problème est que je ne peux pas le supprimer, il s'applique partout sur le site pour d'autres entrées. Si quelqu'un a une recommandation pour cet identifiant, appréciez.