jQuery disable anchor tag bootstrap button onClick

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

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>

Advertisement

Answer