How do disable link for particular ID

Question

I have the following HTML.

<a id="SomeLink" title="My Title" href="http://stackoverflow.com">Click Here</a>

I want to disable clicking on this link. Like if there is a way in CSS or Jquery to remove "href" from this link so it is not clickable?

Why not just removing the link if you don't want clicking upon it? — gdoron, Dec 29 '13 at 07:30
I can't because that code is coming from somewhere else and I have no control over it. — Frank Martin, Dec 29 '13 at 07:52
Please read this:http://stackoverflow.com/questions/11114622/jquery-id-selector-works-only-for-the-first-element/11114634#11114634 — gdoron, Dec 29 '13 at 08:04

score 1 · Answer 1 · answered Dec 29 '13 at 07:31

1

Can you try this, Removed link during on ready handler, you can also use the same while in another firing event handler as well.

 $(function(){
      $("#SomeLink").attr("href", "javascript:void(0);");
 });

OR

 $(function(){
      $("#SomeLink").attr("href", "#");
 });

answered Dec 29 '13 at 07:31

Krish R

22,583
7
50
59

This is still clickable but maybe this is really what he asked – gdoron Dec 29 '13 at 07:33

Barmar · Answer 2 · 2013-12-29T07:53:55.457

1

Bind a click handler that does nothing and disables the default action by returning false.

$('#SomeLink').click(function() {
    return false;
});

Maybe this will allow you to deal with elements with duplicate IDs:

$('a[id=SomeLink]').click(function() {
    return false;
});

When you use an ID selector, jQuery uses getElementById, which will only find the first element with the ID. Perhaps using the generic attribute selector will bypass that and use a loop that just matches on the ID attribute. If that doesn't work, you may have to write a filter:

$('a').filter(function() {
    return this.id == 'SomeLink';
}).click(function() {
    return false;
});

edited Dec 29 '13 at 07:53

answered Dec 29 '13 at 07:32

Barmar

741,623
53
500
612

I tried this but didn't work. May be because there are multiple tags with same ID? – Frank Martin Dec 29 '13 at 07:44
IDs are required to be unique, you must not do that. Use classes to group related tags. – Barmar Dec 29 '13 at 07:48
I can't control that because code is coming from somewhere else. Is there a way to parse all those IDs that are coming in that page through javascript? Then I can run a look and remove HREF from each of them. – Frank Martin Dec 29 '13 at 07:50
I've added some suggestions to my answer. But you should complain to whoever is sending you the code, because it's invalid and will not work with many normal scripts. – Barmar Dec 29 '13 at 07:54
Actually I am using SharePoint 2013 which is sending this HTML. – Frank Martin Dec 29 '13 at 08:52
I don't know anything about SharePoint, but I suspect the problem is that the template author did not ensure unique IDs. – Barmar Dec 29 '13 at 08:55
This is SharePoint's default template which is made by Microsoft. – Frank Martin Dec 29 '13 at 10:10
Maybe you should ask about it on sharepoint.stackexchange.com. While Microsoft's flounting of standards is legendary, it seems unlikely they would intentionally do something like this. – Barmar Dec 29 '13 at 10:11

score 0 · Answer 3 · answered Dec 29 '13 at 07:38

0

This is very simple.Just use attr in Jquery

function disbleLink(){
 $("#SomeLink").attr('href','');
 }

Jsfiddle Demo here

answered Dec 29 '13 at 07:38

Abhinav015

44
7

I tried this but didn't work. May be because there are multiple tags with same ID? – Frank Martin Dec 29 '13 at 07:46
Can you please explain me. What do you exactly want? If you want to disable all links with different ids... that is also possible – Abhinav015 Dec 29 '13 at 07:54
Yes I want to disable all links having this ID. And there are multiple such IDs on that page. – Frank Martin Dec 29 '13 at 08:51
Hi have done it. I have disabled all links by using same class.Have a look on demo. [JSFiddle Demo](http://jsfiddle.net/3cY7N/2/) – Abhinav015 Dec 29 '13 at 09:01
I don't have css class in my element. – Frank Martin Dec 29 '13 at 10:45
you can use class in jquery also. As in jquery there are three types of selectors .(class),#(id) and (body/a/div/etc etc...)element – Abhinav015 Dec 29 '13 at 10:57

score 0 · Answer 4 · answered Dec 29 '13 at 07:41

0

Links cannot be disabled. Use a button instead.

<button disabled>click me</button>

If you want to prevent the default behavior when clicking a link, you can use e.preventDefault()

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

answered Dec 29 '13 at 07:41

chovy

72,281
52
227
295

score 0 · Answer 5 · answered Dec 29 '13 at 07:46

0

You can use the following code in your JS.

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

And this code in your CSS.

#link{
text-decoration:none;
color: #ccc;
}

answered Dec 29 '13 at 07:46

Anil Kumar

459
6
16

score 0 · Answer 6 · edited Dec 30 '13 at 19:17

I found an answer that I like much better on this site.

Looks like this:

$(document).ready(function(){
    $("a#SomeLink").click(function () { 
        $(this).fadeTo("fast", .5).removeAttr("href"); 
    });
});

Enabling would involve setting the href attribute

$(document).ready(function(){
    $("a#SomeLink").click(function () { 
        $(this).fadeIn("fast").attr("href", "http://whatever.com/wherever.html"); 
    });

});

How do disable link for particular ID

6 Answers6