Aktivieren und deaktivieren Sie das Textfeld, wenn eines der Kontrollkästchen aktiviert ist

Question

Ich habe ein Formular mit 2 Kontrollkästchen und 2 Abschnitte von Eingabetextfeldern, die deaktiviert sind.

Wenn nur das erste Kontrollkästchen wird das folgende Eingabetextfeld überprüft werden, aktiviert werden:

• Email
• Bestätigen Sie die Email
• Vollständiger Name

Wenn nur das zweite Kontrollkästchen aktiviert ist Die folgenden Eingabetextfelder sollten aktiviert sein:

• Email
• Confirm Email
• Farbe
• Größe
• Modell

Wenn beide Kontrollkästchen als alle Eingabetextfelder geprüft werden sollte aktiviert werden. Das Problem, das ich habe, ist, dass, wenn beide Kontrollkästchen aktiviert sind, eines deaktiviert ist, die 2 E-Mail-Textfelder deaktiviert werden.

Hier ist eine Geige zu dem, was ich habe. Ich kann jQuery verwenden. http://jsfiddle.net/Ujxkq/

Hier ist mein 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> 

Hier mein Javascript ist:

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

Answer 1

Sie markiert diese Frage mit jQuery, aber Sie verwenden es nicht so weit.
Hier ist eine Version, die jQuery verwendet:

jQuery(function($) { 
    $('#checkboxOne, #checkboxTwo').click(function() { 
     var cb1 = $('#checkboxOne').is(':checked'); 
     var cb2 = $('#checkboxTwo').is(':checked'); 
     $('#emailAddr, #emailConfirm').prop('disabled', !(cb1 || cb2)); 
     $('#fullName').prop('disabled', !cb1); 
     $('#color, #size, #model').prop('disabled', !cb2);  
    }); 
}); 

Sie alle sich auf das Kontrollkästchen Onclick-Attribute entfernen, wenn Sie diese Version verwenden.
Die aktualisierte Geige für diese Version ist hier: http://jsfiddle.net/tB7Yz/

Answer 2

Statt nur Makeln hin und her jedes Mal, überprüfen Sie den Status der beiden Kontrollkästchen, und ob jeder entscheiden Feld sollte basierend darauf aktiviert oder deaktiviert werden.

Sie können es vereinfachen, um eine einzelne Funktion nach unten, die Onclick der beiden Kontrollkästchen aufgerufen wird:

function enableDisableAll() { 
    var cb1 = document.getElementById('checkboxOne').checked; 
    var cb2 = document.getElementById('checkboxTwo').checked; 
    document.getElementById('emailAddr').disabled = !(cb1 || cb2); 
    document.getElementById('emailConfirm').disabled = !(cb1 || cb2); 
    document.getElementById('fullName').disabled = !cb1; 
    document.getElementById('color').disabled = !cb2; 
    document.getElementById('size').disabled = !cb2; 
    document.getElementById('model').disabled = !cb2; 
} 

Aktualisiert Geige ist hier: http://jsfiddle.net/p8gqZ/1/

Answer 3

Ich änderte ein wenig Code ein verwendet JQuery

$(document).ready(function(){ 
var changeStatus = function(){ 
    var fne = $("#checkboxOne").prop("checked"); 
    $("#fullName").prop("disabled", !fne); 

    var csme =$("#checkboxTwo").prop("checked"); 
    $("#color").prop("disabled", !csme); 
    $("#size").prop("disabled", !csme); 
    $("#model").prop("disabled", !csme); 

    var any= fne || csme; 
    $("#emailAddr").prop("disabled", !any); 
    $("#emailConfirm").prop("disabled", !any); 
}; 


$("#checkboxOne").on("change", changeStatus); 
$("#checkboxTwo").on("change", changeStatus); 

});

Fiddle