Włączanie i wyłączanie pola tekstowego, jeśli zaznaczono to pole wyboru:

Question

Mam formularz z 2 polami wyboru i 2 sekcjami wejściowych pól tekstowych, które są wyłączone.

Jeśli tylko pierwsze pole jest zaznaczone następujące pole tekstowe wejściowy powinien być włączony:

• email
• Potwierdź Email
• Pełna nazwa

Jeśli tylko druga opcja jest zaznaczona należy włączyć następujące pola tekstowe:

• email
• Potwierdź Email
• Kolor
• Rozmiar
• model

Jeśli oba pola wyboru są zaznaczone niż wszystkich pól tekstowych wejściowych powinno być włączone. Problem polega na tym, że jeśli oba pola wyboru są zaznaczone, to odznaczono, że 2 pola tekstowe wiadomości e-mail stają się nieaktywne.

Oto skrzypce do tego, co mam. Mogę używać jQuery. http://jsfiddle.net/Ujxkq/

Tu jest mój 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> 

Oto mój 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; 
} 

Answer 1

Państwo określili to pytanie z jQuery, ale nie używasz go do tej pory.
Oto wersja, która używa jQuery:

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

Można usunąć wszystkie atrybuty onclick na samych wyboru, jeśli używasz tej wersji.
Zaktualizowane skrzypce dla tej wersji są tutaj: http://jsfiddle.net/tB7Yz/

Answer 2

Zamiast przełączania iz powrotem za każdym razem, sprawdzić stan obu wyboru i zdecydować, czy każdy pole powinno być włączone lub wyłączone w oparciu o to.

można uprościć go do jednej funkcji, która jest wywoływana onclick z obu wyboru:

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

Updated skrzypce jest tutaj: http://jsfiddle.net/p8gqZ/1/

Answer 3

Zmieniłem trochę kodu używane 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