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:

  • E-mail
  • 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:

  • E-mail
  • 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