如果选中任一复选框,则启用和禁用文本字段
Posted
技术标签:
【中文标题】如果选中任一复选框,则启用和禁用文本字段【英文标题】:Enable and disable text field if either checkbox is checked 【发布时间】:2013-05-31 13:33:44 【问题描述】:我有一个带有 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;
【问题讨论】:
【参考方案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/
【讨论】:
谢谢。我没有使用 jQuery,因为我认为即使我有它也不需要它。很抱歉给 jQuery 打上标签,而不是让您感到困惑。 这不是问题。如果你已经有 jQuery 可用并且已经加载到页面上,我个人更喜欢这个版本,因为它更紧凑,并且从嵌入到 HTML 中删除了应用程序逻辑(onclick)。 感谢 jcsanyi。你介意解释一下 !(cb1 || cb2) 如何在 .prop() 函数中求值吗? .prop('disabled', !(cb1 || cb2)。我想我明白了,但我不确定我明白。.prop('disabled', !(cb1 || cb2))
与非 jQuery 代码 .disabled = !(cb1 || cb2)
相同,只是它针对 $()
函数中引用的两个 ID 运行。 ||
表示 OR,!
表示 NOT。所以 (cb1 || cb2) 表示(复选框 1 被选中,或复选框 2 被选中)。如果选中任一复选框,则计算结果为 true
,否则计算结果为 false
。这与我们需要的 disabled
属性相反,所以我们用 !
否定它。
感谢 jcsanyi。这是否定,!,我不太确定。谢谢! :)【参考方案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/
【讨论】:
更好,因为不需要使用 Jquery【参考方案3】:我用使用过的 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
【讨论】:
谢谢!我在看到你之前接受了上一个答案,但感谢你向我展示了如何使用 jQuery。 @Mdd 我相信您可以根据需要更改接受的答案。我不认为这是 jQuery 的一个很好的例子 - 请参阅我的第二个答案以获得更好的例子来说明 jQuery 的可能性。以上是关于如果选中任一复选框,则启用和禁用文本字段的主要内容,如果未能解决你的问题,请参考以下文章