如果选中任一复选框,则启用和禁用文本字段

Question

我有一个表单,其中包含2个复选框和2个禁用的输入文本字段.

如果仅选中第一个复选框,则应启用以下输入文本字段:

• 电子邮件
• 确认邮件
• 全名

如果仅选中第二个复选框,则应启用以下输入文本字段:

• 电子邮件
• 确认邮件
• 颜色
• 尺寸
• 模型

如果同时选中了两个复选框,则应启用所有输入文本字段.我遇到的问题是,如果选中了两个复选框,则取消选中一个复选框,将禁用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;
}

Answer 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/

Answer 2

而不是每次只来回切换,检查两个复选框的状态,并决定是否应该基于此启用或禁用每个字段.

您可以将其简化为单个函数,可以通过任一复选框调用它:

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/