layui禁止多次点击提交导致的表单重复提交情况

问题如下：

我们在提交form表单的时候，提交成功后，由于响应慢导致用户可以重复点击提交的按钮。这肯定不可以出现这样的情况。为了解决这个问题，就需要弄一个防点击提交来解决重复提交表单。其实就是给按钮添加一个属性，在标签的class属性上添加 layui-disabled就没办法重复提交了。
layui在线文档地址：https://www.layui.site/layer/index.htm

解决方案如下：

1. 首先在button按钮里面加一个属性名字，preservation就是我自己定义的一个属性名

 <button class="layui-btn preservation" type="button" id="saveButton"
        style="background:#56a2f0;width: 100px; display: none; color: #ffffff">保存
  </button>

2. 在ajax请求响应成功前加下面代码：

// 成功的时候
// 单击之后提交按钮不可选,防止重复提交
var DISABLED = 'layui-btn-disabled';
// 增加样式
$('.preservation').addClass(DISABLED);
// 增加属性
$('.preservation').attr('disabled', 'disabled');

截图如下：

这样就可以实现form表单提交成功的时候就把提交按钮禁用了。

效果如下图显示：

但是还有一种情况很重要，虽然我们实现了提交表单成功按钮不可以点击了。但是如果ajax请求报错或者提交失败的话，提交按钮就会出现禁用状态。这样用户就不能点击了。其实解决问题方法很简单。我们禁用了这个按钮，我们在移除禁用按钮的元素不就好了吗。步骤3就是问题的解决方法。

3. 移除添加的元素layui-btn-disabled

// 失败的时候
// 单击之后提交按钮不可选,防止重复提交
var DISABLED = 'layui-btn-disabled';
$('.preservation').removeClass(DISABLED);
$('.preservation').removeAttr('disabled');

截图如下显示：

效果如下图所示：

以上就是问题的解决方法，可以参考下方连接的博客，讲解的比我的详细，看起来易懂。
https://blog.csdn.net/wuxianbing2012/article/details/106053958/?utm_medium=distribute.pc_relevant.none-task-blog-2_defaultbaidujs_title~default-1.no_search_link&spm=1001.2101.3001.4242.2