Disabling a Hyperlink Using jQuery

HTML doesn’t provide a direct way to disable a hyperlink. If we are to do this ourselves, two things need to be done:

  1. Grey out the link.
  2. Completely replace the <a> tag with a <span> but preserve the children.

Let’s say, we  start with a link:

<a href="example.com"><img src="/img/link.png"/> A Link </a>

We can create style called “disabled”:

.disabled { 
  filter: alpha(opacity=30); 
  opacity: 0.3

Apply the class to a disabled link to get the greyed out look.

<a href="example.com" class="disabled"><img src="/img/link.png"/> A Link </a>

Finally, to replace the link with a span, use this script:

$(function() {
    $("a.disabled").each(function() {
        var link = this;
        var label = document.createElement('span');
        label.className = "disabled";
        label.innerHTML = link.innerHTML;
        link.parentNode.replaceChild(label, link);

2 thoughts on “Disabling a Hyperlink Using jQuery

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s