Disable button link on beforeSend ajax

Question

I have a button link on my view like so:

<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>

Now, I am using ajax on my page to submit values to my webApi controller methods, and when I do, I would like the button link to be disabled. Here is my 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");
}

This does not work for me. The button is still active during ajax call. How do I disable this button during ajax call?

Answer 1

Use

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

And add CSS

.disabled{
  cursor: not-allowed;
}

This will put a disabled cursor on your button.

Answer 2

can you try this .attr("disabled", "disabled"); on your button