如何通过通用函数禁用多表单的提交按钮（jQuery实现）

嘿，我懂你的困扰——重复写相同的代码确实很麻烦，其实你已经找对方向了，只是可能差了一点点细节！

你提到用$('.form').submit(function(){ $(this)...没成功，大概率是表单的类名没对应上——要确保所有需要这个功能的弹窗表单都加上了class="form"哦。如果类名没问题，那这段代码本身是可以工作的，我给你优化得更健壮一些：

// 给所有带.form类的表单绑定提交事件
$('.form').submit(function() {
  // 同时兼容input和button类型的提交按钮
  $(this).find('input[type="submit"], button[type="submit"]').prop('disabled', true);
});

不过还有几个关键细节要注意，不然可能还是会踩坑：

• 确保DOM加载完成后再绑定事件：把代码包在$(document).ready()里，避免DOM还没渲染完就执行绑定，导致找不到表单：

$(document).ready(function() {
  $('.form').submit(function() {
    $(this).find('input[type="submit"], button[type="submit"]').prop('disabled', true);
  });
});

• 处理动态生成的表单：如果你的弹窗表单是通过AJAX或者JS动态创建的（不是页面一开始就有的），上面的绑定方式会失效，因为事件绑定的时候这些表单还不存在。这时候要用事件委托，把事件绑定到父元素（比如document）上：

$(document).ready(function() {
  // 监听所有动态生成的.form表单的提交事件
  $(document).on('submit', '.form', function() {
    $(this).find('input[type="submit"], button[type="submit"]').prop('disabled', true);
  });
});

• 失败时恢复按钮状态：如果表单提交失败（比如验证不通过、AJAX请求出错），记得把按钮重新启用，不然用户没法再次提交。举个AJAX提交的例子：

$(document).on('submit', '.form', function(e) {
  e.preventDefault(); // 阻止默认表单跳转
  const $form = $(this);
  const $submitBtn = $form.find('input[type="submit"], button[type="submit"]');
  
  $submitBtn.prop('disabled', true);
  
  // 模拟AJAX提交
  $.ajax({
    url: $form.attr('action'),
    method: $form.attr('method'),
    data: $form.serialize(),
    success: function() {
      // 处理成功逻辑，比如关闭弹窗
    },
    error: function() {
      // 请求失败，恢复按钮可点击
      $submitBtn.prop('disabled', false);
      // 可以在这里提示用户提交失败
    }
  });
});

核心逻辑就是用类选择器批量选中目标表单，通过$(this)定位到当前提交的表单，再找到里面的提交按钮禁用。这样不管你有10个还是100个表单，只需要写一次代码就够啦！

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