我有一个带有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的版本：
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/
