How do I dynamically enable/disable links with jQuery?

Question

I have some links displayed on a page. I would like to enable/disable them based on other events on the page. Is there a way to do this with jQuery?

Willner

are you using html5? or xhtml? – Scraggy

@robertpitt why is that relevant? – Calamus

because if your using html5 then you can use the data-* to store data as strings, so you could store the href within data-href and replace the current with a #, then create a plugin to toggle this, such as $('.disabled').DisableClick(); you can do it with preventDefault but i was just going to explain a way for html5. – Scraggy

Answer 1

$('selector_for_links_to_disable').bind('click', function(e){
        e.preventDefault();
})

and for enabling:

$('selector_for_links_to_enable').unbind('click')

Id

Trying to unbind while still being the bind function doesn't work. Then you have to use "return true;". – Teofilateosinte

Answer 2

You could do something like:

$('.links').click(function(e){
  if( [some conditions] ){
    e.preventDefault();
  }
});

Be sure to show that they no longer work somehow, otherwise your users will get confused, lol.

Witter

Answer 3

it depends on what you mean by "disable".

this will make them do nothing:

$("A").click(function() { return false; });

Unrelenting

I think OP means change them from a link to text so they do not appear as links. Otherwise spot on! – Disease

return false is not advised. Use e.preventDefault() instead. – Id

Answer 4

You can do something like this:

<script>
    $(document).ready(function() {
        $('input#disableall').live('click', function(){
            $('a').attr( 'class', 'disabled' );
            alert('All links are disabled.');
        });


        $('input#enableall').live('click', function(){
            $('a').attr( 'class', 'enabled' );
            alert('All links are enabled.');
        });

        $('a.disabled').live('click', function(event){
            event.preventDefault();
        });
    });
</script>

<a href='http://www.google.com'>Google<a/>
<a href='http://www.yahoo.com'>Yahoo<a/>
<a href='http://www.hotmail.com'>Hotmail<a/>

<input type='button' id='disableall' value='Disable Links' />
<input type='button' id='enableall'  value='Enable Links' />

Boggs

Answer 5

$(document).delegate('.links', 'click', function () {
  if ([your condition is true]) {
    return false;
  }
})

delegation is better than handlers, because you can call them before the dom is loaded

Minutiae

Answer 6

When I am giving functions to the buttons by jquery, I like to do this:

indice = '';

$('myLink').live('click',function() {
    if (indice !== 'value1'){

        // your code
    }

    indice = 'value1';
    return indice;

});

with this, you get the function just the first time you press de button. Now you just have to set indice different of value1 to your link works again

Newish