javascript - Ajax 之后单击按钮后禁用按钮 - ASP.NET MVC5

Question

我在 ASP.NET MVC5 中有一个使用 FormMethod.Post 的表单，我有一个提交表单的“创建”按钮，但是如果您单击 ，我将如何让它工作？创建然后禁用该按钮。我已经尝试过:

onclick="this.disabled = true"

但是表单并未提交，但是当它被删除时，您可以在单击创建时添加多个记录

这是我的表单代码:

    @section scripts {
    @Scripts.Render("~/bundles/jqueryajaxval")
    @Scripts.Render("~/bundles/jqueryval")

    <script language="javascript" type="text/javascript">
        // cancel
        $(document).on("click",
            "#CancelForm",
            function(e) {
                var uri = '@Html.Raw(Url.Action("Index", "Membership"))';
                window.location = uri;
                e.preventDefault();
            });

        // submit
        $(document).on("click", "#submitMembership", function(e) {
                // Perform Ajax request to check if CAE/IPI Number is unique.
                var caeipinumber = $('#addMembershipCAEIPINumber').val();
                if (caeipinumber) {
                    $.ajax({
                        url: '@Url.Action("IsCAEIPINumberUnique", "Membership")',
                        data: ({ 'caeipinumber': caeipinumber, 'personaIdToIgnore': null }),
                        type: 'POST',
                        async: false,
                        cache: false,
                        success: function(result) {
                            if (result.toLowerCase() == "false") {
                                // Number is not unique and already exists, so display validation error to the user.
                                e.preventDefault();
                                $('#addMembershipForm').validate().showErrors({ 'CAEIPINumber': 'CAE / IPI Number already exists!' });
                                return false;
                            }
                            return true;
                        },
                        error: function(xhr, status, error) {
                        }
                    });
                }
            });
    </script>
}

@section additionalStyles {

}

@section modal {

}

<article class="row">
    <h1 class="pageTitle artistHeader fw200 mb20 mt10">@ViewBag.Title</h1>

    <div class="col-md-1"></div>
    <div id="createMembership" class="col-md-10 formContainer">
        <div class="panel">
            <div class="panel-heading">
                <span class="panel-title">
                    <i class="glyphicon glyphicon-pencil"></i>&nbsp;Details of New Membership
                </span>
            </div>

            @using (Html.BeginForm("AddMembership", "Membership", FormMethod.Post, new { id = "addMembershipForm", role = "form", @class = "theme-primary form-horizontal" }))
            {
                <fieldset>
                    <legend style="display: none">Add Membership Form</legend>
                    @Html.AntiForgeryToken()
                    @Html.ValidationSummary(true)
                    <div class="panel-body p25 fill bt0 pbn">
                        <div class="form-group">
                            @Html.LabelFor(x => x.MembershipName, new { @class = "control-label col-md-3" })
                            <div class="col-md-8">
                                @Html.TextBoxFor(x => x.MembershipName, new { id = "addMembershipName", @class = "form-control", placeholder = "Enter Membership Name..." })
                                @Html.ValidationMessageFor(x => x.MembershipName, string.Empty, new { @class = "text-danger" })
                            </div>
                        </div>
                        <div class="form-group">
                            @Html.LabelFor(x => x.CAEIPINumber, new { @class = "control-label col-md-3" })
                            <div class="col-md-8">
                                @Html.TextBoxFor(x => x.CAEIPINumber, new { id = "addMembershipCAEIPINumber", @class = "form-control", placeholder = "Enter CAE / IPI Number..." })
                                @Html.ValidationMessageFor(x => x.CAEIPINumber, string.Empty, new { @class = "text-danger" })
                            </div>
                        </div> 
                    </div>
                    <div class="panel-footer">
                        <div class="text-center">
                            <input type="button" class="btn btn-primary" id="CancelForm" value="Cancel" />
                            <input id="submitMembership" type="submit" class="btn btn-primary" value="Create" />
                        </div>
                    </div>
                </fieldset>
            }
        </div>
    </div>
    <div class="col-md-1"></div>
</article>

Answer 1

您应该监听表单提交事件，使用的提交输入会触发表单提交事件，当触发该事件时，您可以禁用您单击的按钮。

$("#form1").submit(function (){
   $("#submitbtn").prop ("disabled",true);
   $.ajax({requestprops,success:function(){
             $("#submitbtn").prop ("disabled",false);
    }});
});