如果选中任一复选框,则启用和禁用文本字段
我有一个带有2个复选框和2个输入文本字段被禁用的部分的表单.
I have a form with 2 checkboxes and 2 sections of input text fields that are disabled.
如果仅选中第一个复选框,则应启用以下输入文本字段:
If only the first checkbox is checked the following input text field should be enabled:
- 电子邮件
- 确认电子邮件
- 全名
如果仅选中第二个复选框,则应启用以下输入文本字段:
If only the second checkbox is checked the following input text fields should be enabled:
- 电子邮件
- 确认电子邮件
- 颜色
- 大小
- 模型
如果同时选中了两个复选框,则应启用所有输入文本字段.我的问题是,如果两个复选框都被选中,则一个复选框未被选中,这两个电子邮件文本字段将被禁用.
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.
这是我所拥有的东西.我可以使用jQuery. http://jsfiddle.net/Ujxkq/
Here is a fiddle to what I have. I can use 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:
Here is my 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的版本:
You tagged this question with jQuery, but you're not using it so far.
Here's a version that uses 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/
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/