How to enable or disable an anchor using jQuery?
How to enable or disable an anchor using jQuery?
To prevent an anchor from following the specified href, I would suggest using preventDefault():
// jQuery 1.7+
$(function () {
$('a.something').on("click", function (e) {
e.preventDefault();
});
});
// jQuery < 1.7
$(function () {
$('a.something').click(function (e) {
e.preventDefault();
});
// or
$('a.something').bind("click", function (e) {
e.preventDefault();
});
});
See:
http://docs.jquery.com/Events/jQuery.Event#event.preventDefault.28.29
Also see this previous question on SO:
The app I'm currently working on does it with a CSS style in combination with javascript.
a.disabled { color:gray; }
Then whenever I want to disable a link I call
$('thelink').addClass('disabled');
Then, in the click handler for 'thelink' a tag I always run a check first thing
if ($('thelink').hasClass('disabled')) return;
I think a nicer solution is to set disabled data attribute on and anchor an check for it on click. This way we can disable temporarily an anchor until e.g. the javascript is finished with ajax call or some calculations. If we do not disable it, then we can quickly click it a few times, which is undesirable...
$('a').live('click', function () {
var anchor = $(this);
if (anchor.data("disabled")) {
return false;
}
anchor.data("disabled", "disabled");
$.ajax({
url: url,
data: data,
cache: false,
success: function (json) {
// when it's done, we enable the anchor again
anchor.removeData("disabled");
},
error: function () {
// there was an error, enable the anchor
anchor.removeData("disabled");
}
});
return false;
});
I made a jsfiddle example: http://jsfiddle.net/wgZ59/76/
$("a").click(function(event) {
event.preventDefault();
});
If this method is called, the default action of the event will not be triggered.
If you are trying to block all interaction with the page you might want to look at the jQuery BlockUI Plugin
You never really specified how you wanted them disabled, or what would cause the disabling.
First, you want to figure out how to set the value to disabled, for that you would use JQuery's Attribute Functions, and have that function happen on an event, like a click, or the loading of the document.