使用javascript禁止点击后提交按钮不会触发

Question

我试图在点击后禁用按钮，以便它不能被双击。

这是我有：

<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') + '" />'); 
     } 
    }); 

    } 

按钮禁用，但它不提交表单。

点击并提交表单后，如何禁用它？

Answer 1

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

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

Answer 2

在禁用按钮的同一个块中手动提交带有submit（）方法的表单。

Answer 3

你将有一个更容易的时间从你输入取出onclick属性，只是结合的Click事件上$(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上的一个工作示例。