前端学习
Source
Edit
History

Jquery禁用按钮，防止重复提交

文章目录
  1. 1. 参考资料

使用对象.prop("disabled",true)可以进行禁用，对象.prop("disabled",false)取消禁用。

  • html代码如下
1
2
3
4
5
6
7
<form id="editEventForm" novalidate="novalidate">
.....
    <div class="card-footer">
	<a href="javascript:history.go(-1);" class="btn btn-success float-right"></i> 返回</a>
        <button type="submit" class="btn btn-primary float-right" style="margin-right:5px;">提交</button>
    </div>
</form>
  • js代码
1
2
3
4
5
<script>
    $("#editEventForm button[type='submit']").click(function(e){
            $("#editEventForm button[type='submit']").prop("disabled",true)
    })
</script>

注意：如果您的提交按钮设置了ID，可以使用$(“#ID名称”).prop(“disabled”,true)来操作，这样就不用写这么长了。

  • 可以在提交成功或失败后，执行取消禁用

1
$("#editEventForm button[type='submit']").prop("disabled",false)

参考资料