如何使用 jQuery 在输入按钮上禁用表单提交？

在一些情况下，我们可能需要通过禁用表单提交来避免用户多次提交表单，例如在提交表单时弹出一个模态框来确认用户是否确定提交操作。那么，如何使用 jQuery 来实现输入按钮上的禁用表单提交功能呢？下面为大家介绍一下。

HTML 部分

首先，我们需要先在 HTML 中创建一个表单和一个提交按钮，如下所示：

<form id="myform">
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="submit" id="submit">提交</button>
</form>

其中，id="myform" 用于给表单设置一个 HTML ID，方便后续 jQuery 根据 ID 来获取该表单元素。type="submit" 的按钮代表表单提交按钮，默认情况下会在点击后提交表单。

jQuery 部分

接下来，我们需要在 jQuery 中编写代码来禁用表单提交。具体方式是在提交表单时使用 preventDefault() 阻止表单的默认提交行为，并在提交按钮上添加 disabled 属性禁用该按钮。代码如下：

$(document).ready(function() {
  $('#myform').submit(function(event) {
    // 阻止表单默认提交行为
    event.preventDefault();

    // 禁用提交按钮
    $('#submit').attr('disabled', true);

    // 此处可以写自己的逻辑代码

    // 最后再移除提交按钮的禁用属性
    $('#submit').attr('disabled', false);
  });
});

代码解释

1. $(document).ready() 函数表示在页面 DOM 元素加载完毕后执行相应的操作；
2. $('#myform').submit() 函数在表单提交时触发，括号内的 event 参数代表事件对象；
3. event.preventDefault() 阻止表单默认提交行为；
4. $('#submit').attr('disabled', true) 将表单提交按钮的 disabled 属性设置为 true，即禁用该按钮；
5. 在禁用提交按钮之后，可以写自己的逻辑代码，例如弹出确认框等；
6. 最后，再将表单提交按钮的 disabled 属性设置为 false，以便用户下次可再次提交表单。

总结

通过以上 jQuery 代码的实现，我们可以方便地在输入按钮上禁用表单提交，增加用户交互的友好性和操作的安全性。