jQuery disable anchor tag bootstrap button onClick

Question

I want to disable my bootstrap button on-click using Javascript, to prevent a double-click in order to avoid DbContext threading issues.

<a type="button" class="btn btn-success" id="BackBtn" asp-area="" asp-controller="PageStuff" asp-action="PageStuff" asp-route-culture="@CultureInfo.CurrentCulture.Name">@_loc[Model.BackButton]</a>

This works as expected and hides the button:

$("#BackBtn").on("click", function () {
    document.getElementById("BackBtn").style.display = "none";
});

This does not disable the button, but works elsewhere in my app for other elements:

$("#BackBtn").on("click", function () {
    document.getElementById("BackBtn").disabled = true;
});

I have also tried using document.getElementById("BackBtn").unbind("click"); as mentioned here .

And this document.getElementById("BackBtn").prop("disabled", true);

and this $("#BackBtn").prop("disabled", "disabled");

and this $('BackBtn').prop("disabled", true);

and this document.getElementById("BackBtn").attr("disabled", "disabled");

and this $("#values:BackBtn").attr("disabled", true);

and this $("#BackBtn").attr("disabled", true);

and this $('BackBtn').attr('readonly', true);

and this [...document.querySelectorAll('BackBtn')].map(e => e.disabled = true);

and various other variations.

Any ideas how I can get the button to disable on click? Does 'disabled' even exist for an anchor tag of type="button"? Im starting to think there is no such property.

Answer 1

The disabled attribute works only on button , for anchor tag you can use pointer-events: none;

 $("#BackBtn").on("click", function() { $(this).css('pointer-events', 'none') });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a type="button" class="btn btn-success" id="BackBtn" asp-area="" asp-controller="PageStuff" asp-action="PageStuff" asp-route-culture="@CultureInfo.CurrentCulture.Name" href="#">Dsiable me</a>