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

Enable and disable text field if either checkbox is checked

提问by Mdd

I have a form with 2 checkboxes and 2 sections of input text fields that are disabled.

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

If only the first checkbox is checked the following input text field should be enabled:

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

• Email
• Confirm Email
• Full Name

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

If only the second checkbox is checked the following input text fields should be enabled:

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

• Email
• Confirm Email
• Color
• Size
• Model

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

If both checkboxes are checked than all the input text fields should be enabled. The problem I have is that if both checkboxes are checked, then one is unchecked the 2 email text fields become disabled.

如果选中两个复选框，则应启用所有输入文本字段。我遇到的问题是，如果两个复选框都被选中，那么一个被取消选中，2 个电子邮件文本字段将被禁用。

Here is a fiddle to what I have. I can use jQuery. http://jsfiddle.net/Ujxkq/

这是我所拥有的小提琴。我可以使用jQuery。 http://jsfiddle.net/Ujxkq/

Here is my HTML:

这是我的 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>

Here is my Javascript:

这是我的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;
}

采纳答案by jcsanyi

You tagged this question with jQuery, but you're not using it so far.
Here's a version that uses jQuery:

您使用 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);    
    });
});

You can remove all onclick attributes on the checkboxes themselves if you're using this version.
The updated fiddle for this version is here: http://jsfiddle.net/tB7Yz/

如果您使用此版本，您可以删除复选框本身的所有 onclick 属性。
此版本的更新小提琴在这里：http: //jsfiddle.net/tB7Yz/

回答by jcsanyi

Instead of just toggling back and forth every time, check the status of both checkboxes, and decide whether each field should be enabled or disabled based on that.

不是每次都来回切换，检查两个复选框的状态，并根据此决定是否应该启用或禁用每个字段。

You can simplify it down to a single function that gets called onclick of either 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;
}

Updated fiddle is here: http://jsfiddle.net/p8gqZ/1/

更新的小提琴在这里：http: //jsfiddle.net/p8gqZ/1/

回答by Neobta

I changed a little your code an used Jquery

我改变了一点你的代码一个使用过的 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

小提琴