CODEWITHSUNDEEP
javascriptjquery
Abs
Abs

Reputation: 57916

Disable and Enable ALL Hyperlinks using JQuery

I have the below which disables all hyperlinks but after an event I want to enable them back all again, how can I do this?

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

I don't think its as simple as just setting it to true. ;)

Thanks all

Upvotes: 7

Views: 18872

Answers (11)

Stieranka
Stieranka

Reputation: 82

This replace all links on page to # which means: disable links for other pages

$(document).ready(function() {
    $('a').attr('href', '#');
});

Upvotes: 4

Elnoor
Elnoor

Reputation: 3752

Another way, if you strictly want the url to be inaccessible as well, you can remove href attribute from a tag. Something like that:

 $('a').removeAttr('href');

additionaly changing color of text and onhover cursor:

 $('a').css('color', '#333');
 $('a').hover(function () {
       $(this).css('cursor', 'not-allowed');
 );

Upvotes: 0

Ricky Boyce
Ricky Boyce

Reputation: 1806

Or even better, simply toggle the display of a large element with the high z-index. In the example below, the div covers the body.

var link = document.getElementsByTagName('a')[2];
var noclick = document.getElementById('noclick');

link.onclick = function() {
  noclick.className = 'on';
}
#noclick {
  display: none;
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  /* Make sure this floats over content */
  z-index: 100; 
}

#noclick.on {
  display: block;
}
<body>
  <div id="noclick"></div>
  <a href="#">one</a>
  <a href="#">two</a>
  <a href="#">three</a>
</body>

Upvotes: 0

Pointy
Pointy

Reputation: 413702

Instead of binding your "click" handler that way, do this:

$('a').bind("click.myDisable", function() { return false; });

Then when you want to remove that handler it's easy:

$('a').unbind("click.myDisable");

That way you avoid messing up other stuff that might be bound to "click". If you just unbind "click", you unbind everything bound to that event.

edit in 2014 — the way you bind events now is with .on():

$('a').on('click.myDisable', function() { return false; });

Probably it'd be better to do this:

$('a').on('click.myDisable', function(e) { e.preventDefault(); });

To unbind:

$('a').off('click.myDisable');

Finally, you could bind a handler to the document body and deal with <a> tags that are dynamically added:

$('body').on('click.myDisable', 'a', function(e) { e.preventDefault(); });

// to unbind

$('body').off('click.myDisable');

Upvotes: 20

user113716
user113716

Reputation: 322452

Binding and unbinding takes some overhead.

A different solution would be to add a class like disabled, then use hasClass('disabled') to test and see whether or not it should return false.

$('a').addClass('disabled');
$('a').click(function() {
    if($(this).hasClass('disabled'))
        return false;
});

Upvotes: 5

andres descalzo
andres descalzo

Reputation: 14967

$(function(){


    $.myStopAnchor = function(){
      $stop = true;
    }

    $.myNoStopAnchor = function(){
      $stop = false;
    }

    $.myNoStopAnchor();

    $("a").click(function(ev) { 
       if ($stop){
         ev.stopPropagation()
       }
       return !$stop; 
    });

});

Upvotes: 0

aefxx
aefxx

Reputation: 25249

Try this:

// Better to use the live event handler here, performancewise
$('a').live('click', function() {... return false;});

// Now simply kill the binding like this
$('a').die('click');

bye

Upvotes: 6

Patricia
Patricia

Reputation: 7802

you could unbind the click handler:

$('a').unbind('click')

Upvotes: 0

prodigitalson
prodigitalson

Reputation: 60413

var disableLink = function(){ return false;};
$('a').bind('click', disableLink);

to restore:

$('a').unbind('click', dsiableLink);

Upvotes: 4

Shawn Steward
Shawn Steward

Reputation: 6825

You should be able to unbind it.

$("a").unbind("click");

Upvotes: 0

DA.
DA.

Reputation: 40663

You want to unbind the event: http://api.jquery.com/unbind/

Upvotes: 0

Related Questions