如何在选中复选框时启用/禁用输入文本框？
要在选中复选框时启用或禁用输入文本框，可以使用JavaScript来实现这一功能。以下是一个简单的示例，展示了如何通过HTML和JavaScript来实现这一交互。
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checkbox Control Input</title>
</head>
<body>
<label>
<input type="checkbox" id="toggleCheckbox"> 启用/禁用输入框
</label>
<br>
<input type="text" id="textInput" placeholder="输入一些文本">
</body>
</html>JavaScript部分
document.addEventListener('DOMContentLoaded', function() {
const checkbox = document.getElementById('toggleCheckbox');
const textInput = document.getElementById('textInput');
checkbox.addEventListener('change', function() {
if (this.checked) {
textInput.disabled = false;
} else {
textInput.disabled = true;
}
});
});解释
- HTML部分:
- 创建一个复选框 (
<input type="checkbox" id="toggleCheckbox">) 和一个文本输入框 (<input type="text" id="textInput">)。 - 使用
<label>标签来关联复选框和它的描述文本。
- 创建一个复选框 (
- JavaScript部分:
- 使用
DOMContentLoaded事件确保DOM完全加载后再执行脚本。 - 获取复选框和文本输入框的引用。
- 为复选框添加
change事件监听器，当复选框状态改变时，检查其是否被选中，并相应地启用或禁用文本输入框。
- 使用
应用场景
这种功能在多种场景下都非常有用，例如：
- 表单验证：用户必须同意某些条款才能提交表单。
- 动态表单：根据用户的输入动态显示或隐藏某些字段。
- 权限控制：根据用户的角色启用或禁用某些输入控件。
优势
- 用户体验：允许用户根据需要启用或禁用某些功能，提高交互的直观性。
- 灵活性：可以根据不同的条件动态调整界面，适应多种使用场景。
通过这种方式，可以有效地控制用户界面的交互逻辑，提升应用程序的用户友好性和功能性。
相关·内容
我将一个jobtype值列表绑定到一个网格视图，每一行都有sno、jobtype、复选框和一个文本框。选中复选框后，文本框将启用，我必须输入一些值(如费用)。在这里我可以选中多个工作类型，然后在文本框中输入费用，最后保存这些值(工作类型，费用)。我成功绑定了数据，但是如何从每行的文本框中获取输入的值？？如何启用或禁用文本
浏览 0提问于2017-03-20得票数 0
2回答
当复选框选中时，我正在尝试启用和禁用文本框。但此处只有一个文本框在选中复选框时启用。如何在选中复选框时启用和禁用两个文本框？
浏览 0提问于2016-08-05得票数 0
4回答
如何在中保持禁用复选框
、、、、
我有一个将文本框与复选框配对的应用程序。用户可以选中复选框，该复选框将自动填充具有特定美元金额的文本框。如果取消选中复选框，则将textbox的值设置为零。他们还可以在文本框中输入一个美元金额，而onblur事件处理程序则可以切换该复选框。
当他们在文本框中输入一个美元金额，然后用鼠标单击复选框时，就会出现问题。这将触发onbl
浏览 1提问于2015-03-03得票数 1
回答已采纳
我有一个包含复选框和文本框在不同项目模板字段中的网格视图。加载网格时，文本框将被禁用。现在我想要的是，当用户选中任何复选框时，应启用该特定行中受尊重的文本框。当用户取消选中复选框时，文本框应再次清除并禁用。现在，当用户单击保存按钮时，javascript应该会验证所有其复选框都被选中<
浏览 2提问于2011-06-07得票数 0
回答已采纳
1回答
NotApplicable, new onclick = "ChangeEnabledState(" + i + ");"
当用户单击NA复选框时我对以下场景有问题：
用户单
浏览 1提问于2012-11-19得票数 2
我已尝试禁用和启用编辑文本框的聚焦取决于复选框。选中复选框时，文本框是可聚焦的，如果未选中，则文本框应该是不可聚焦的。在使用复选框禁用文本框后，当我尝试启用文本框对焦时，它不起作用。这是我的代码。
浏览 0提问于2012-05-08得票数 0
回答已采纳
1回答
我对html这件事非常陌生，所以如果没有选中复选框，我会尝试如何禁用文本框，我已经尝试了很多解决方案，但到目前为止都没有效果。我是不是使用了错误的I而他们没有正确识别？谢谢!
<!
浏览 2提问于2015-08-13得票数 0
回答已采纳
我想写一个Javascript代码，它可以在我选中复选框后禁用文本输入。然而，我也想在页面加载之后运行Javascript代码。 我已经尝试了一些Javascript，并且成功了。如果我选中文本框，文本输入将被禁用。但是，我将从我的数据库中读取是否选中或取消选中复选框，这里的问题是，如果因为数据库而选中了复选框。根据javascript，文本输入
浏览 19提问于2019-06-24得票数 0
这段代码检查复选框是否在站点上被启用，如果它被禁用，则禁用文本框。Function disableTextBox()是一个onclick函数，$(function()用于检查刷新页面后复选框的行为，我没有使用localstorage，因为有时会使用不同的浏览器。如果选中该复选框，则应启用文本框；如果未选中该复选框，则应对任何输入禁用该复选
浏览 25提问于2019-04-10得票数 1
回答已采纳
我想在安装过程中添加一个表单，其中包括一个复选框和两个文本框。初始复选框必须处于启用状态，文本框必须处于禁用状态。当我们选中复选框时，文本框必须处于启用状态，反之亦然。请提供有关如何创建此表单以及如何使用install4j选项实现启用和禁用功能的信息。贾格德什·穆沙姆。
浏览 4提问于2017-01-16得票数 1
回答已采纳
很常见的情况是，表单中有一个复选框，上面写着"Use“，后面跟着一个textbox，用户可以在这个文本框中输入他想要使用的"foo值”。当然，只有选中“使用foo”时，此文本框才会有用。我不知道如何处理这种情况：
禁用textbox (即textboxfoo.Enabled=false;)Hide it (即用户输入foo值，如果他愿意)，并忽略他输入的值。
浏览 5提问于2009-01-29得票数 5
回答已采纳
我有一个复选框字段和一个输入字段(endDate)。我希望启用和禁用endDate取决于复选框值(当复选框被选中时，endDate被禁用，反之亦然)。我有输入和复选框元素如下：
加载页面时，取决于inUse字段值，将启用</
浏览 2提问于2015-10-19得票数 0
2回答
我有一个表单，其中有一个问题，答案是复选框，在最后一个答案中有另一个请指定选项，当我选中该复选框时，文本框启用，我可以在其中填写内容。我的答案保存在array.But中，现在问题是什么，当我提交表单时，我想要其他选项的值，请指定选项为文本框的值，该值是在选中该选项时填充的。
浏览 0提问于2011-03-21得票数 0
回答已采纳
2回答
我有三个组合框-当他们被选中时，我想要它检查勾选框。我的问题是，当三个Combos被选中时，如何将复选框设置为true。如果勾选框为真，我将如何使之启用tex框？
浏览 0提问于2018-08-01得票数 2
回答已采纳
1回答
我有一个对话框，其中包含一个复选框和一个文本框。只有选中复选框时才应启用textbox。tbox.disableProperty().bind(cbox.selectedProperty());
然而，这与我想要的效果正好相反(当我选中复选框时，textbox将被禁用)。我在文本框上找不到"
浏览 2提问于2019-11-26得票数 0
回答已采纳
我的应用程序中有一个复选框，它应该是选中的，但也是禁用的。禁用时，我注意到复选框的前景以及内容文本框的颜色比启用时更暗。我想让复选框处于禁用状态，但将内容文本框的前景颜色更改为与禁用复选框时相同的颜色。我如何才能做到这一点呢？
浏览 3提问于2013-12-15得票数 0
我有复选框和文本输入我正在使用以下代码，但它在未选中时启用/选中时禁用，因此如何根据我的需要进行调整。
浏览 2提问于2013-03-01得票数 5
回答已采纳
我想在用户单击ASP.NET中的提交按钮时禁用选中的复选框。我可以使用JavaScript通过该按钮的onclick事件禁用复选框。复选框在中继器中。当通过单击“提交”按钮提交表单时，代码隐藏按钮中的任何复选框都不会显示为选中状态。如何在单击提交按钮时禁用选中的复选框，并在提交页面时仍然看到复选框</e
浏览 1提问于2012-06-16得票数 2
如何在选中asp.net复选框时使用jquery启用或禁用asp.net DropDownList控件。
因此，我有一个asp.net复选框，当我选中它时，我想启用/禁用DropDownList。
浏览 0提问于2010-08-20得票数 5
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
