gpt4 book ai didi

javascript - 如果选中任一复选框,则启用和禁用文本字段

转载 作者:技术小花猫 更新时间:2023-10-29 12:49:19 26 4
gpt4 key购买 nike

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

如果只选中第一个复选框,则应启用以下输入文本字段:

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

如果只选中第二个复选框,则应启用以下输入文本字段:

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

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

这是我所拥有的 fiddle 。我可以使用 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;
}

最佳答案

你用 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 属性。
此版本的更新 fiddle 在这里:http://jsfiddle.net/tB7Yz/

关于javascript - 如果选中任一复选框,则启用和禁用文本字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16929964/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com