42

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?

TRiG
  • 10,148
  • 7
  • 57
  • 107
GSto
  • 41,512
  • 37
  • 133
  • 184
  • are you using html5? or xhtml? – RobertPitt Sep 24 '10 at 16:13
  • @robertpitt why is that relevant? – Yahel Sep 24 '10 at 16:32
  • 1
    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. – RobertPitt Sep 24 '10 at 17:39

6 Answers6

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

and for enabling:

$('selector_for_links_to_enable').unbind('click')
dekomote
  • 3,817
  • 1
  • 17
  • 13
4

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.

pho3nixf1re
  • 2,322
  • 2
  • 15
  • 13
2

it depends on what you mean by "disable".

this will make them do nothing:

$("A").click(function() { return false; });
Dave Thieben
  • 5,388
  • 2
  • 28
  • 38
2

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' />
Naveed
  • 41,517
  • 32
  • 98
  • 131
1
$(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

Tibastral
  • 582
  • 5
  • 7
0

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

AdRock
  • 2,959
  • 10
  • 66
  • 106
Humberto Matias
  • 1
  • 1