javascript - 在 beforeSend ajax 上禁用按钮链接

Question

我的 View 中有一个按钮链接，如下所示:

<a href="@Url.Action("ActionName", "ControllerName", new { id = Model.Id})" id="My-Btn" class="btn btn-info pull-right" data-role="button">Go Somewhere</a>

现在，我在我的页面上使用 ajax 向我的 webApi Controller 方法提交值，当我这样做时，我希望按钮链接被禁用。这是我的 ajax:

$.ajax({
    url: myUrl,
    method: "DELETE",
    beforeSend: function () {
        disableSendButton();
    },
    success: function() {
        row.remove();

        toastr.options = {
            onHidden: function () {
                window.location.href = redirectUrl;
            },
            timeOut: 2000
        }
        toastr.success("Success.");
    }
});

function disableSendButton() {
    $("#My-Btn").addClass("ui-disabled");
}

这对我不起作用。该按钮在 ajax 调用期间仍然处于事件状态。如何在 ajax 调用期间禁用此按钮？

Answer 1

使用

$("#My-Btn").prop('disabled', true).addClass("disabled");

并添加CSS

.disabled{
  cursor: not-allowed;
}

这会在您的按钮上放置一个禁用的光标。