使用 jQuery 提交后禁用按钮不起作用答案

【问题标题】：Disable button after submit with jQuery not working使用 jQuery 提交后禁用按钮不起作用
【发布时间】：2016-11-29 15:11:50
【问题描述】：

我试图防止表单被提交两次。我已经实施了以前发布的解决方案，但我无法使其工作。该按钮未禁用，并且我为调试放置的“警报”未显示。有什么想法吗？

我有这段代码

$('#choice').submit(function()
{  
    $('#btnPlus').attr('disabled',true);
    alert('done');
    this.submit();
});

这是形式：

<form id="choice" name='form' method="POST" action="/">
    <input type="hidden" name="projId" value="{{proj}}">
    <button type="submit" name="vote" id="btnPlus" value="p{{proj}}"></button>
</form>

【问题讨论】：

试试.prop 而不是.attr
您遇到了什么错误？您是在页面末尾运行代码还是在文档就绪调用中运行代码？您是否正确包含了 jQuery？
谢谢，但它没有解释为什么不显示“警报”。
如果警报没有被运行，那么这个函数永远不会被执行。确保您已正确设置所有选择器。我只是在 jsfiddle 中完全运行了您的代码，并且运行良好。也许你忘了包含 jQuery？
我的代码前面有<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>。我应该把我的代码放在别的地方吗？

标签： jquery forms http-post

【解决方案1】：

您应该先添加e.preventDefault() 以停止提交，然后执行您想要的操作并在使用this.submit(); 触发提交之后，因为正如现在所写的那样，您在提交函数中的代码将不会执行并且页面将是点击时提交：

$('#choice').submit(function(e)
{  
    //Stop submit
    e.preventDefault(); 

    //Do what you want
    $('#btnPlus').attr('disabled',true);
    alert('done');

    //Submit
    this.submit();
});

希望这会有所帮助。

【讨论】：

但这并不能解释为什么没有显示他的警报
更新了我的答案@j08691（试图解释）
警报被阻止，并且会在表单提交之前出现
似乎完全忽略了$('#choice').submit()。可能是因为我使用的是
似乎在我的服务器中它阻止了 jQuery，但我下载了 JS 并且运行良好。解决这个问题后，我实现了 Zakaria 的解决方案，效果很好。

【解决方案2】：

您应该使用prop 而不是attr 函数：

<script>
  $('#choice').submit(function()
  {  
      $('#btnPlus').prop('disabled',true);
      alert('done');
      this.submit();
  }); 
</script>

【讨论】：

【解决方案3】：

等我看到错误，我们都会觉得有点傻，

<form id="choice" name='form' method="POST" action="/">
  <input type="hidden" name="projId" value="{{proj}}">
  <input type="submit" name="vote" id="btnPlus" value="p{{proj}}">
</form>

<button> 不是用于提交表单的有效 HTML 元素，据我所知。如果您可以使用<button> 作为提交，那么这对我来说是个新闻，因为迄今为止我所学到的一切都说在处理表单字段时使用<input type="submit">。

编辑：在我自己意识到之前，没有意识到有人在上面的 cmets 中得出了相同的结论

【讨论】：

提交类型的按钮可以提交表单。事实上，提交类型是按钮的默认类型。

【解决方案4】：

这里 - Jquery 和 BOOTSTRAP 4

        $(document).ready(function () {
        //------------------------- begin ------------------------- 
        //add class "clicked" for the clicked button
        $('button').on('click', function(){
            $(this).addClass('clicked');
        });
        //desable clicked submit button after first click - prevent double click
        $('form').submit(function(e){  
            e.preventDefault(); //Stop submit
            $(document).find('.clicked').attr('disabled',true); //disable button
            $(document).find('.clicked').html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span><span class="sr-only">Loading...</span>'); //change text button for load spinner
            this.submit(); //Submit
        }); 
        //-------------------------- end -------------------------- 
        });

【讨论】：