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" 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.
CodePudding user response:
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" id="BackBtn" asp-area="" asp-controller="PageStuff" asp-action="PageStuff" asp-route-culture="@CultureInfo.CurrentCulture.Name" href="#">Dsiable me</a>