javascript - 禁用表单提交可防止发送按钮属性

Question

我有一个带有两个提交按钮的表单。我使用“名称”属性来查看单击哪个属性来提交表单。我想在使用 jquery 提交时禁用按钮，具有以下功能:

$(document).on('submit', '.js-form', function(e) {
   $(this).find('input[type=submit]').prop('disabled', true);
});

问题是执行此操作后，我发现名称属性不再被发送。我已经检查了发送的请求(在网络选项卡 - chrome 中)，即使在发送之前没有任何问题，它也没有被发送。

谁能告诉我这是为什么以及如何克服它？

谢谢

Answer 1

您应该通过捕获表单的状态来禁止表单提交。您可以通过向表单添加一个类来完成此操作，如果它具有该类，则停止该事件。

 $(document).on('submit', '.js-form', function(e) {
     if ($(this).hasClass('disabled')) {
         // Form is disabled, stop the event
         e.preventDefault();
         e.stopPropagation();
         return false;
     } else {
         // Allow first submit and add class to stop subsequent
         $(this).addClass('disabled');
     }
 });

这不会清除或禁用任何按钮，从而允许所有数据通过。