只允许在MVC中单击一次按钮

Question

这个问题已被多次询问和回答,但我必须遗漏一些基本的问题.每当按下一个提交按钮时,我希望它被禁用,因此不会发生"双击".(我也尝试过jQuery"one"功能).点击,当然应该提交表格.

提交表单后,控制器会休眠几秒钟以模拟处理时间,然后再次提供此视图,同时应再次启用所有按钮.

我正在使用VS2013并通过以下方式创建了一个新的MVC应用程序:

文件|新项目| Asp.Net Web应用程序| MVC

查看\首页\ Index.vbhtml

<script>
    $('input[type="submit"]').click(function () {
        $(this).prop('disabled', true);
    });
</script>

@Using (Html.BeginForm())
    @<input type="submit" name="prevStep" value="Previous" />
    @<input type="submit" name="saveStep" value="Save" />
    @<input type="submit" name="nextStep" value="Next" />
End Using

HomeController.Vb

Public Class HomeController
    Inherits System.Web.Mvc.Controller

    Function Index() As ActionResult
        System.Threading.Thread.Sleep(1000)
        Return View()
    End Function
End Class

Answer 1

试试这个:

<script>
    $(function() {
        $('input[type="submit"]').click(function() {
            $(this).attr('disabled', 'disabled');
        });
    })
</script>

或者如果您将脚本放在按钮之后,则不需要将其包装在document.ready:

<script>
    $('input[type="submit"]').click(function() {
        $(this).attr('disabled', 'disabled');
    });
</script>

如果您使用的是jQuery 1.6+,您应该使用该.prop()功能来禁用该按钮:

$(this).prop('disabled', true);