点击表单提交按钮发邮件时，如何添加disabled类防重复点击？

你的核心问题是：submit类型的按钮点击后会立即触发表单提交，页面刷新/跳转的速度比你修改按钮状态的代码执行速度快，导致修改还没生效就被覆盖了。之前的三次尝试都是监听按钮点击事件，但赶不上表单提交的流程，所以看不到效果。

正确的解决方案：监听表单的submit事件，而不是按钮的click事件 #

步骤1：给表单添加ID（如果还没有）

<form id="enrollAdminForm">
  <!-- 这里放你的其他表单输入字段 -->
  <div class="d-grid mt-3">
    <button class="btn btn-primary" type="submit" name="authoriseUser" id="authoriseUser">Enroll New Admin <i class="fas fa-sign-in-alt ms-1"></i></button>
  </div>
</form>

步骤2：用jQuery监听表单提交事件，立即禁用按钮

$(document).ready(function(){
  $('#enrollAdminForm').on('submit', function(){
    const $btn = $('#authoriseUser');
    // 同时添加disabled类和设置disabled属性（Bootstrap需要类来改变样式，原生属性用来禁用交互）
    $btn.addClass('disabled').prop('disabled', true);
    // 可选：修改按钮文字，提示用户正在处理
    $btn.html('Enrolling... <i class="fas fa-spinner fa-spin ms-1"></i>');
  });
});

为什么之前的代码无效？ #

1. 前两次尝试：没必要移除btn btn-primary类，直接追加disabled类即可，但本质问题是监听按钮点击事件，表单提交太快，代码还没执行完页面就刷新了。
2. 第三次尝试：同样是监听按钮点击，表单提交的优先级更高，按钮状态的修改还没生效就被页面刷新覆盖了。

如果是AJAX异步发送邮件（不刷新页面） #

如果你的邮件发送是通过AJAX实现的，需要阻止默认表单提交，并且在请求完成后恢复按钮状态：

$(document).ready(function(){
  $('#enrollAdminForm').on('submit', function(e){
    e.preventDefault(); // 阻止默认表单提交行为
    const $btn = $('#authoriseUser');
    $btn.addClass('disabled').prop('disabled', true).html('Enrolling... <i class="fas fa-spinner fa-spin ms-1"></i>');

    // 发送AJAX请求处理邮件
    $.ajax({
      url: '/your-mail-handler-url', // 替换成你的邮件处理接口地址
      method: 'POST',
      data: $(this).serialize(), // 序列化表单数据
      success: function(){
        alert('新管理员注册成功！');
        // 可选：恢复按钮状态（如果需要允许再次提交）
        $btn.removeClass('disabled').prop('disabled', false).html('Enroll New Admin <i class="fas fa-sign-in-alt ms-1"></i>');
      },
      error: function(){
        alert('注册失败，请重试');
        // 恢复按钮状态，允许用户再次尝试
        $btn.removeClass('disabled').prop('disabled', false).html('Enroll New Admin <i class="fas fa-sign-in-alt ms-1"></i>');
      }
    });
  });
});

内容的提问来源于stack exchange，提问作者VIVEK ROBIN KUJUR