How to disable all hyperlink using jquery

Question

I know how to disable one hyperlink at a time, so when user clicks on it then nothing will happen. Here is sample:

$('#myLink').click(function(e) {
    e.preventDefault();
    //do other stuff when a click happens
});

But now I have many hyperlink for my pager within li and div. It looks like:

<div id='pager'>
    <ul>
        <li>
            <a href='search.aspx?page=1'>1</a>
        </li>
        <li>
            <a href='search.aspx?page=2'>2</a>
        </li>
        <li>
            <a href='search.aspx?page=3'>3</a>
        </li>
        <li>
            <a href='search.aspx?page=4'>4</a>
        </li>
    </ul>
</div>

I want to iterate in all hyperlink with in my div and enable/disable all through two routines. As a result when the user clicks then nothing will happen and no postback occurs. One routine will disable all and one routine will enable all hyperlink as before. How can this be achieved?

it may work...// 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'); — Thomas, Jul 18 '12 at 18:41
No offense Thomas, but that's terrible advice :-) `live` is widely reviled because of the unintended consequences of using it. If you do want to account for new A tags that might get added to the page later, `delegate` is the better approach. (See http://stackoverflow.com/questions/4579117/jquery-live-vs-delegate for more info) — machineghost, Jul 18 '12 at 18:42
@machineghost Unless you're going to delegate to the document -- which is the same thing as `live` performance-wise. — Blazemonger, Jul 18 '12 at 18:47
@Blazemonger True, but even then I think `delegate` is preferable because it is more explicit. With `live` the user seems to magically get an event handler that always works, and if they don't delve in to the inner workings of `live` they won't understand what's going on. With `delegate` they are specifically saying "I'm hooking up an event handler to the document", and if nothing else they're more aware of what they're doing (although ideally of course that awareness will lead to them delegating higher up in the DOM). So, I still maintain that it's a best practice to never use `live`. — machineghost, Jul 18 '12 at 19:10

score 3 · Accepted Answer · answered Jul 18 '12 at 18:40

3

$('#pager a').click(function(e) {
e.preventDefault();
//do other stuff when a click happens
});

answered Jul 18 '12 at 18:40

j08691

204,283
31
260
272

i think it is also good solution. $('a').addClass('disabled'); $('a').click(function() { if($(this).hasClass('disabled') return false; }); – Thomas Jul 18 '12 at 18:44
If you want some A tags to be disabled and some not, that might make sense, but otherwise you're just over-complicating things. And even if you do want to "enable" some A tags and not others, a simpler way of doing it would just be to unbind the click handler, rather than adding a class and then making the click handler perform logic to interpret that class. – machineghost Jul 18 '12 at 19:14

score 2 · Answer 2 · answered Jul 18 '12 at 18:40

2

Just use a jQuery selector that grabs all of those A tags, like so:

$('#pager a').click(function(e) {
    e.preventDefault();
}

answered Jul 18 '12 at 18:40

machineghost

33,529
30
159
234

How to disable all hyperlink using jquery

2 Answers2