提交表单时禁用提交按钮引发页面重载，求防重复提交替代方案

首先明确：提交表单时完全可以禁用提交按钮，你的问题大概率是写法或执行时机不对导致的。

为什么你的代码没生效？ #

你用了attr('disabled', 'disabled')来设置禁用状态，但在jQuery中，对于disabled这种布尔类型的DOM属性，更推荐使用prop()方法而非attr()。attr()操作的是HTML标签上的属性，而prop()直接操作DOM元素的属性，对于布尔属性的状态控制更可靠。

另外，如果你的代码是在按钮点击事件中执行，但没处理好表单提交的时序，可能会出现按钮还没禁用完成，表单已经提交的情况，导致用户依然能多次点击。

替代方案（亲测有效） #

这里提供几种可靠的实现方式，核心都是先禁用按钮，再确保表单正常提交，同时覆盖多种提交场景（点击按钮、回车提交）：

方案1：监听表单的submit事件（推荐）

这种方式能覆盖所有表单提交的场景，包括用户按回车提交：

$('form').on('submit', function() {
  const submitBtn = $(this).find('button[type="submit"], input[type="submit"]');
  // 先检查按钮是否已禁用，避免重复触发
  if (submitBtn.prop('disabled')) return false;
  
  // 禁用按钮并添加样式
  submitBtn.addClass('sbmt_disable').prop('disabled', true);
  
  // 允许表单正常提交（不需要阻止默认行为）
  return true;
});

方案2：监听提交按钮的click事件

如果只需要处理按钮点击的场景，可以用这种方式：

$('button[type="submit"]').on('click', function(e) {
  const $btn = $(this);
  
  if ($btn.prop('disabled')) {
    // 已禁用则阻止后续操作
    e.preventDefault();
    return;
  }
  
  // 禁用按钮
  $btn.addClass('sbmt_disable').prop('disabled', true);
  
  // 手动触发表单提交（确保表单能正常提交）
  $btn.closest('form').submit();
});

额外优化：添加加载提示（可选）

如果表单提交需要时间，可以在禁用按钮的同时添加加载文字，提升用户体验：

// 在禁用按钮时替换文字
submitBtn.text('提交中...').addClass('sbmt_disable').prop('disabled', true);

关键注意点 #

• 不要用attr()设置disabled，改用prop('disabled', true)
• 必须在表单提交动作触发前完成按钮禁用，避免时序问题
• 如果是AJAX提交的表单，记得在请求完成（成功/失败）后重新启用按钮

内容的提问来源于stack exchange，提问作者Source