disable anchor tag using Jquery

Question

I have a image associated with the anchor tag, once the user clicks the image a popup loads. I want to disable this anchor tag.

The html code looks like:

<a href="#" class="openModalLink">
<img style="vertical-align: middle; border: none" width="9%" alt="" id="imgmap" class="zoom" /></a>

I have tried the below codes but doesn't seem to work

 $(".openModalLink").off("click");
 $(".openModalLink").attr("disabled", true);
 $(".openModalLink").attr("disabled", "disabled");

Thanks for the replies

Answer 1

You could do this

$('.openModalLink').click(function(event){
    event.preventDefault();
});

Also refer docs

EDIT:

To enable and disable anchor tag

function disabler(event) {
    event.preventDefault();
    return false;
}

$('#enable').click(function(){
    $('.openModalLink').unbind('click',disabler);
});
$('#disable').click(function(){
    $('.openModalLink').bind('click',disabler);
});
​

DEMO

EDIT 2:

As of jquery 1.7 .on() and .off() are preferred over bind and unbind to attach and remove event handlers on elements

$('#enable').click(function() {
    $('body').off('click', '.openModalLink', disabler);
});
$('#disable').click(function() {
    $('body').on('click', '.openModalLink', disabler);
});​