使用 JavaScript 启用/禁用输入按钮
Harshit Jindal
2024年2月15日
本教程讲授如何使用 JavaScript/JQuery 启用/禁用 HTML 输入按钮。
我们经常遇到想要启用/禁用 HTML 按钮的情况，例如在提交表单之前和之后。最好的方法是使用 JavaScript DOM 操作来选择按钮，并将其 disabled 状态更改为 true/false，以切换其 on/off 状态。在下面，我们将看到两种禁用/启用按钮的方法，一种使用 JavaScript，另一种使用 JQuery。
使用 JavaScript 启用/禁用输入按钮
下面是一个按钮的演示，当在框中输入文字时，按钮会被激活，否则会被禁用。
HTML 代码
<input class="input" type="text" placeholder="fill me">
<button class="button">Click Me</button>
JavaScript 代码
let input = document.querySelector('.input');
let button = document.querySelector('.button');
button.disabled = true;
input.addEventListener('change', stateHandle);
function stateHandle() {
if (document.querySelector('.input').value === '') {
button.disabled = true;
} else {
button.disabled = false;
}
}
在这里，我们首先将对输入和按钮的引用存储在两个变量中，然后将按钮的默认状态设置为禁用。我们添加了一个事件侦听器，以查看文本框内是否有任何输入活动，然后使用 stateHandle() 函数相应地禁用/启用提交按钮。
使用 jQuery 启用/禁用输入按钮
<html>
<head>
<title>Enable/Disable a HTML button</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
Name: <input type="text" id="reco" />
<input type="submit" id="submit" disabled="disabled" />
</body>
<script>
$(document).ready(function () {
$('#reco').on('input change', function () {
if ($(this).val() != '') {
$('#submit').prop('disabled', false);
}
else {
$('#submit').prop('disabled', true);
}
});
});
</script>
</html>
我们使用 ready() 函数使其在文档加载完毕后可用。然后，.on() 方法将事件处理程序附加到输入字段。change 事件将检查输入字段中的更改并相应地运行该函数。然后，.prop() 方法将更改按钮的状态。
作者： Harshit Jindal
Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.
LinkedIn