Jquery to disable links

Question

I have page with several links and linked buttons. I want to disable all. How can I do this?

<div id="content-main">
  <h1>My Notes</h1>

  <a href="edit.html" id="btnNew" name="btnNew" class="button">Add new Link</a>

  <table border="0" cellspacing="0" cellpadding="4">
    <tr bgcolor="#edf3fe">
      <td><a href="edit.html">Link 1</a></td>
      <td><a href="edit.html">Link 2</a></td>
    </tr>
  </table>
  <div class="button-row"></div>
</div>

I tried the following which is working to the point that link no longer works but I would like to fade the links too.

$(document).ready(function(){


    $( "a" ).click(function( event ) {
        alert( "The link will no longer work" );
        event.preventDefault();
    });

}); }

Possible duplicate of [jQuery disable a link](http://stackoverflow.com/questions/970388/jquery-disable-a-link) — Andrew Brooke, Jan 25 '16 at 23:49
@DinoMyte - Wont that target all elements though and not just tags? — Casey ScriptFu Pharr, Jan 26 '16 at 01:31

Casey ScriptFu Pharr · Accepted Answer · 2016-01-27T03:48:49.640

If you want them greyed out, then try this. Based on answer above:

$(document).ready(function(){
   $("a").click(function($event){
   var $this = $(this);
       $event.preventDefault();
       $this.css("color", " #808080"); //only targets the actual link clicked. If you want all when you click any link use $('a').css();
   });
});

BTW, word of advice for the newbie, it is always a good practice that I do, by making anything that is an jQuery object variable prefixed with '$'. Easy when you start doing multi-level context functions.

score 1 · Answer 2 · answered Jan 26 '16 at 00:38

1

how about this ?

$(document).ready(function(){
    $("a").click(function(event){
      event.preventDefault();
        $("a").fadeOut();
    });
});

like what you said, if the user clicks on any of the links, all of them fade out. is this what you want?

answered Jan 26 '16 at 00:38

Arman Malekzadeh

80
1
12

thanks! I would like to see the links but greyed/faded. I am a newbie. Thanks for your help. – Kaur Jan 26 '16 at 00:50

score 0 · Answer 3 · answered Jan 26 '16 at 00:42

0

You can use this:

$(document).ready(function(){ 
    $( "a" ).click(function( event ) {
       $(this).fadeOut();
       event.preventDefault();
    });
});

Hope this help!

answered Jan 26 '16 at 00:42

John Roca

1,204
1
14
27

I tried this `$j("a").stop().fadeTo(500, 0.2);` This made all the links grey. How do I limit them to the ones within div `content-main`? – Kaur Jan 26 '16 at 01:08

score 0 · Answer 4 · answered May 01 '20 at 16:07

Not 100% related, but it took me a while to find this trick. If your HTML looks like this

<a id="myLink" href="http://takemesomewhere.com" class="underlineHoverOnly">link text</a>

then you can take the link away with just:

$('#myLink').removeAttr('href');

You can also stop the link underline on hover with:

$('#myLink').removeAttr('class');

Jquery to disable links

4 Answers4