使用javascript禁用单击后提交按钮未触发答案

【问题标题】：Submit button not firing after click disabled using javascript使用javascript禁用单击后提交按钮未触发
【发布时间】：2012-11-27 20:59:08
【问题描述】：

我试图在单击按钮后禁用它，以使其无法被双击。

这就是我所拥有的：

<input id="btn" type="button" disabled="disabled" value="Log On" onclick="logonDisableSubmitButtons()"/>

还有我的javascript：

function logonDisableSubmitButtons(clickedButton) {

    $("input[type='button']").each(function() {
      if (this.name != clickedButton)
        $(this).attr("disabled", "disabled");
      else {
        //hiding the actually clicked button
        $(this).hide();
        //Creating dummy button to same like clicked button
        $(this).after('<input type="button" disabled="disabled" value="' + $(this).val() + '" class="' + $(this).attr('class') + '" />');
      }
    });

  }

按钮禁用但不提交表单。

如何在点击后禁用它然后提交表单？

【问题讨论】：

标签： c# javascript asp.net-mvc

【解决方案1】：

使用submit 输入而不是button 输入：

<input id="btn" type="submit" disabled="disabled" value="Log On" onclick="logonDisableSubmitButtons()"/>

【讨论】：

很简单！完美运行！

【解决方案2】：

在禁用按钮的同一块中使用 submit() 方法手动提交表单。

【讨论】：

【解决方案3】：

您可以通过从输入中删除onclick 属性并简单地将点击事件绑定到$(document).ready(); 来更轻松地管理此问题，如下所示：

    <form id="myForm">
        <input type="submit" id="myInput" value="click me"/> <br />
        <input type="button" class="someClass" value="random button 1" />
        <input type="button" class="someClass" value="random button 2" />
        <input type="button" class="someClass" value="random button 3" />
        <input type="button" class="someClass" value="random button 4" />
    </form>

<script type="text/javascript">
$(document).ready(function(){
    $('#myInput').click(function(e){  
        e.preventDefault(); //<--this prevents the form from being submitted on click.        
        logonDisableSubmitButtons(this);
    });
});
function logonDisableSubmitButtons(clickedButton) {
    $(clickedButton).attr("disabled", "disabled");
    $("input[type='button']").each(function(i, input) {
            $(input).hide();
            $(this).after(
                '<input type="button" disabled="disabled" value="' + 
                $(this).val() + " from logonDisableSubmitButtons() method" +
                '" class="' +
                $(this).attr('class') + '" />'
            );
    });
    $("#myForm").submit(); //<--this will submit the form
}
    </script>

Here's jsFiddle 上的一个工作示例。

【讨论】：