使用 JavaScript 启用/禁用输入按钮

Harshit Jindal 2023年1月30日 2021年3月21日
  1. 使用 JavaScript 启用/禁用输入按钮
  2. 使用 jQuery 启用/禁用输入按钮
使用 JavaScript 启用/禁用输入按钮

本教程讲授如何使用 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;
  }
}

禁用按钮 javascript.png

在这里,我们首先将对输入和按钮的引用存储在两个变量中,然后将按钮的默认状态设置为禁用。我们添加了一个事件侦听器,以查看文本框内是否有任何输入活动,然后使用 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 avatar Harshit Jindal avatar

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

相关文章 - JavaScript DOM