禁用按钮仍然提交表单答案

【问题标题】：Disabled button still submits form禁用按钮仍然提交表单
【发布时间】：2013-07-24 13:23:16
【问题描述】：

保存按钮在您单击一次后将被禁用，但如果您再次单击它，它会重新提交表单。我猜它永远不会到达 if 语句的第一部分。任何帮助将不胜感激：

-block extra_scripts

:javascript

  function check_button(){ 
    var saveButtons = $('a[name=saveButton]');
    if (saveButtons.is(':disabled')) { 
      alert("disabled");
      return false;
    }
    else{
      $("#main_form").submit();
      saveButtons.attr("disabled", true);
    }
  }

-block main

  .btn-group.pull-right
    %a.btn.icon-save.btn-callout{
      :name => "saveButton",
      :id => "saveButton",
      :type => "submit",
      :onclick => "check_button()"
      }
      Save

请注意，saveButtons 包含两个按钮。一个用于页面顶部，一个用于底部。

【问题讨论】：

一个一个禁用两个按钮。
@Ved 如果两个按钮的名称/id/类型相同，我该怎么做？
@mikros0ft - twp 按钮不应具有相同的 id 属性。 . .这应该是页面独有的。即便如此，您也可以根据它们的形式来选择各个按钮。 . .例如：$("main_form").find("a[name='saveButton']").

标签： jquery button javascript

【解决方案1】：

我猜只有输入元素可以是:disabled（见here）

你可以试试if (saveButtons.attr("disabled"))。

【讨论】：

【解决方案2】：

试试saveButtons.attr("disabled", "disabled");

【讨论】：

不，它仍然做同样的事情。禁用保存按钮继续重新提交表单。
哦，现在我明白了。 var saveButtons = $('a[name="saveButton"]');应该是这样的
好的，现在我们真的需要一个小提琴

【解决方案3】：

我在我的身上使用了这个： https://stackoverflow.com/a/22557155/5475948

当然，我还有一些其他脚本检查我的元素以删除 disabled 类。

<form method="post" id="valid">
    <input type="hidden" id="selected-product" name="selected-product" value="">
    <input type="hidden" id="step" name="step" value="1">
    <button type="submit" id="submitter" class="btn btn-green uppercase disabled">Valider</button>
</form>

<script>
//dom ready handler
jQuery(function ($) {
    //form submit handler
    $('#valid').submit(function (e) {
        //check atleat 1 checkbox is checked
        if ($('#submitter').hasClass('disabled')) {
            //prevent the default form submit if it is not checked
            e.preventDefault();
        }
    })
})
</script>

【讨论】：