javascript – 启用和禁用文本字段,如果选中此复选框

前端之家收集整理的这篇文章主要介绍了javascript – 启用和禁用文本字段,如果选中此复选框前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个带有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,'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;
}

解决方法

你用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/

猜你在找的JavaScript相关文章