Find all link in a div element and disable them all

Question

Assume that I have some HTML elements like these :

<div id="content_div">
    <span><a href="some_link">Click me</a></span>
    <div> Hello everybody. Click <a href="some_link_else">me</a> to do something else</div>

    <a href="3rd_link"> Oops </a>
</div>

All that I need is get all "a" tags in the #content_div and disable all of them (I don't want user to click on them). How could I do that in Jquery?

What does you mean with "disable" links? – Reporter Jun 19 '13 at 08:57 — Reporter, Jun 19 '13 at 08:57

Mr. Alien · Answer 1 · 2013-06-19T09:05:53.043

15

I would rely less on jQuery as it might be disabled by the user, so if you want a CSS solution, you can do it like

#content_div {
   pointer-events: none;
   cursor: default;
}

Demo

Edit: To be precise, use this declaration #content_div a

edited Jun 19 '13 at 09:05

answered Jun 19 '13 at 08:59

Mr. Alien

140,764
31
277
265

1

Doesn't work in IE before 11, but it's a great solution if that's acceptable! – bendman Feb 10 '14 at 16:45

score 12 · Accepted Answer · answered Jun 19 '13 at 08:57

12

Try this:

 $("#content_div a").click(function(e) {
   e.preventDefault();
 });

answered Jun 19 '13 at 08:57

Mir

1,536
1
17
29

Kevin Bowersox · Answer 3 · 2013-06-19T09:03:03.230

2

$("#content_div a").css({"color":"#888888", cursor: "default"}).click(function(e){
   e.preventDefault();
});

Working Example http://jsfiddle.net/P4Fqq/

edited Jun 19 '13 at 09:03

answered Jun 19 '13 at 08:57

Kevin Bowersox

88,138
17
142
176

Thank you very much. I can't accept 2 answer at once, so I upvote your answer instead. – Nấm Lùn Jun 19 '13 at 09:00
1

@quangtruong1985 See the updated code which changes the cursor to indicate it cannot be clicked. – Kevin Bowersox Jun 19 '13 at 09:04

OmShankar · Answer 4 · 2015-08-22T10:36:36.007

2

There are two ways here:

1) $('#content a').css({"pointer-events":"none"});

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

edited Aug 22 '15 at 10:36

answered Aug 22 '15 at 10:32

OmShankar

21
2

How can you enable the events after this? – GobSmack Aug 24 '15 at 16:46

Find all link in a div element and disable them all

4 Answers4

Linked