Activer et désactiver le champ de texte si l'une des cases est cochée
J'ai un formulaire avec 2 cases et 2 sections de champs de saisie de texte qui sont handicapés.
Si seulement la première case est coché les cases suivantes champ de texte de saisie doivent être activés:
- Confirmer E-Mail
- Nom Complet
Si seulement la deuxième case est cochée la suite de champs de texte de saisie doivent être activés:
- Confirmer E-Mail
- Couleur
- Taille
- Modèle
Si les deux cases sont cochées que tous les champs de texte de saisie doit être activé. Le problème que j'ai, c'est que si les deux cases sont cochées, puis on est décochée, la 2 e-mail les champs de texte sont désactivés.
Ici est un violon à ce que j'ai. Je peux utiliser jQuery. http://jsfiddle.net/Ujxkq/
Voici mon code HTML:
<form id="myForm">
<h3>Section 1</h3>
Checkbox 1: <input type="checkbox" name="checkbox1" id="checkboxOne" onclick="enableDisableEmail(this.checked, 'emailAddr', 'emailConfirm');enableDisableSection1(this.checked, 'fullName');" />
<p><input type="text" id="emailAddr" name="myEmailAddr" placeholder="Email" disabled /></p>
<p><input type="text" id="emailConfirm" name="myEmailConfirm" placeholder="Confirm Email" disabled /></p>
<p><input type="text" id="fullName" name="myFullName" placeholder="Full Name" disabled /></p>
<h3>Section 2</h3>
Checkbox 2: <input type="checkbox" name="checkbox2" id="checkboxTwo" onclick="enableDisableEmail(this.checked, 'emailAddr', 'emailConfirm');enableDisableSection2(this.checked, 'color', 'size', 'model');" />
<p><input type="text" id="color" name="myColor" placeholder="Color" disabled /></p>
<p><input type="text" id="size" name="mySize" placeholder="Size" disabled /></p>
<p><input type="text" id="model" name="myModel" placeholder="Model" disabled /></p>
</form>
Voici mon code Javascript:
function enableDisableEmail(isEnabled, email, confirm) {
document.getElementById(email).disabled = !isEnabled;
document.getElementById(confirm).disabled = !isEnabled;
}
function enableDisableSection1(isEnabled, fullName) {
document.getElementById(fullName).disabled = !isEnabled;
}
function enableDisableSection2(isEnabled, color, size, model) {
document.getElementById(color).disabled = !isEnabled;
document.getElementById(size).disabled = !isEnabled;
document.getElementById(model).disabled = !isEnabled;
}
source d'informationauteur Mdd
Vous devez vous connecter pour publier un commentaire.
Vous tagged cette question avec jQuery, mais vous ne l'utilisez pas jusqu'à présent.
Voici une version qui utilise jQuery:
Vous pouvez supprimer tous les attributs onclick sur les cases elles-mêmes si vous utilisez cette version.
La mise à jour de violon pour cette version est ici: http://jsfiddle.net/tB7Yz/
Au lieu de simplement la bascule d'avant en arrière à chaque fois, vérifiez l'état de deux cases, et de décider si chaque champ doit être activé ou désactivé sur cette base.
Vous pouvez simplifier le bas à une seule fonction qui est appelée onclick de case à cocher:
Mis à jour le violon est ici: http://jsfiddle.net/p8gqZ/1/
J'ai changé un peu votre code utilisé Jquery
});
Violon