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属性并简单地绑定$(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的一个工作示例。

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

3 个答案: