Включить и отключить текстовое поле, если установлен флажок

У меня есть форма с двумя флажками и 2 разделами текстовых полей ввода, которые отключены.

Если установлен только первый флажок, необходимо включить следующее текстовое поле ввода:

  • Email
  • Подтвердить адрес электронной почты
  • Полное имя

Если установлен только второй флажок, необходимо включить следующие текстовые поля ввода:

  • Email
  • Подтвердить адрес электронной почты
  • Цвет
  • Размер
  • Model

Если оба флажка отмечены, то все входные текстовые поля должны быть включены. Проблема в том, что если оба флажка отмечены флажками, то один из них не установлен, 2 текстовые поля электронной почты становятся отключенными.

Вот скрипка тому, что у меня есть. Я могу использовать jQuery. http://jsfiddle.net/Ujxkq/

Вот мой 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>

Вот мой 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;
}

ОТВЕТЫ

Ответ 1

Вы отметили этот вопрос с помощью jQuery, но пока вы его не используете.
Здесь версия, использующая 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);    
    });
});

Вы можете удалить все атрибуты onclick в самих флажках, если используете эту версию.
Обновленная скрипта для этой версии находится здесь: http://jsfiddle.net/tB7Yz/

Ответ 2

Вместо того, чтобы просто переключаться взад и вперед каждый раз, проверяйте состояние обоих флажков и решайте, должно ли каждое поле быть включено или отключено на основе этого.

Вы можете упростить его до одной функции, которая вызывается с помощью кнопки checkbox:

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

Обновленная скрипка находится здесь: http://jsfiddle.net/p8gqZ/1/

Ответ 3

Я немного поменял ваш код используемым 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