Activer le bouton soumettre lorsque vous sélectionnez la case à cocher
J'ai essayer quelques exemples d'activer le bouton "soumettre" lorsque la case est cochée, mais je suis de nulle part. Ci-dessous est un de mes tentatives, où le bouton "soumettre" est désactivé jusqu'à ce que la case est cochée. S'il vous plaît laissez-moi savoir ce qui me manque.
JS:
function checked(sub1) {
var myLayer = document.getElementById(sub1);
var input = myLayer.childNodes[0];
if (input.checked == true) {
myLayer.disabled = "";
} else {
myLayer.disabled = "disabled";
}
}
HTML:
<p style="color: #FF0000; font-weight: bold;">I have read and agree to the terms and conditions
<input type="checkbox" id="termsChkbx " onchange="checked('sub1')" />
</p>
<p>
<input type="submit" name="submit" value="Order now!" id="sub1" disabled="disabled" />
</p>
Vous devez vous connecter pour publier un commentaire.
Personne n'a expliqué pourquoi votre code ne fonctionne pas.
Pour un, vous ne sont pas de sélectionner le
input
case de l'élément correctement. Il n'est pas un nœud enfant de l'élément de bouton. Vous pouvez soit obtenir une référence à la case à cocher en passantthis
dans leonchange
événement, ou vous pouvez passer leevent
objet et accéder à la case de l'élément par le biais de laevent.target
propriété:Par exemple:
Ensuite, vous pouvez accéder à une référence à la case d'un élément qui a tiré sur l'événement de changement:
Après la modification d'un couple de choses, il ne fonctionnent pas comme prévu:
Cependant, vous pouvez simplifier le code et de le réécrire:
Exemple
Comme une note de côté, je vous suggère fortement d'utiliser JavaScript discret et ajouter un écouteur d'événement à l'élément dans l'ordre pour éviter inline
onchange
événements:Exemple
Voici le code complet
Essayez comme ceci
JS
PLUNKR
Le problème majeur qui peut être facilement vérifié en utilisant le navigateur de la console de débogage. De là, vous pouvez voir immédiatement une exception.
Essayez ceci:
Html:
JavaScript:
Mais sachez, que ce bout de code n'est pas le plus pratique. Il a juste résout votre problème sans l'aide de bibliothèques comme jQuery.
Essayez d'utiliser cette fonction JQuery
Exemple
HTML:
Pendant que votre problème a été résolu, il n'y a pas besoin de JavaScript ici.
Cela peut être fait avec du pur CSS/HTML:
CSS:
HTML:
J'ai utilisé le
:non()
pseudo-classe de détecter si une case n'est pas cochée comme c'est le w3c est l'approche recommandée. Je n'étais pas sûr de l'endroit où (en HTML) la case à cocher est dans la pertinence pour le bouton, j'ai donc utilisé le tilde (~
général sélecteur de frères) pour trouver le bouton. Si la case est immédiatement avant le bouton, je vous conseille d'utiliser le adjacent sélecteur de frères+
à la place.Cependant si vous avez plusieurs cases et vous souhaitez uniquement une case pour faire basculer l'état du bouton, puis en utilisant la :nth-of-type pseudo-classe ou un
id
peut être plus approprié:CSS:
HTML:
Sinon, toutes les cases seront obligatoires pour le bouton cliquez sur-mesure:
CSS:
HTML: