Home > ASP.NET, JavaScript, jQuery > jQuery: Disable hyperlink

jQuery: Disable hyperlink

     The simplest way to disable/enable a link by using jQuery is:

function DisableLinks(links) {
    links.attr('disabled', 'true');
}
function EnableLinks(links) {
    links.removeAttr('disabled');
    // or links.attr('disabled', 'false');
}

However, the ‘disabled‘-attribute is supported only by IE, and the given example won’t work, for instance, in Firefox.

To circumvent this problem I’d like to suggest the following code:

<head>
    <script type="text/javascript" src="jquery-1.6.2.js"></script>
    <style type="text/css">
      .disabledLink
      {
  	        color: Gray;
  	        text-decoration: none;
      }
    </style>
    <script type="text/javascript">

        function DisableLinks(links) {
            links.each(
                function(index, linkDomElement) {
                    var link = $(linkDomElement);            

                    // get the 'href' and 'onclick' attribute values
                    var linkHRef    = link.attr('href');
                    var linkOnClick = link.attr('onclick');

                    // set the dummy attribute values
                    link.attr('href', '#').attr('onclick', 'return false;');

                    // add a temporary attribute to keep the original 'href' value
                    if (linkHRef != undefined)
                        link.attr('tmphref', linkHRef);

                    // add a temporary attribute to keep the original 'onclick' value
                    if (linkOnClick != undefined)
                        link.attr('tmponclick', linkOnClick);

                    // add the class decorating disabled links
                    link.addClass('disabledLink');
                });
        }

        function EnableLinks(links) {
            links.each(
                function(index, linkDomElement) {
                    var link = $(linkDomElement);

                    // get the original values of 'href' and 'onclick' attributes from temporary attributes
                    var originalLinkHRef    = link.attr('tmphref');
                    var originalLinkOnClick = link.attr('tmponclick');

                    // restore the original 'href' value
                    if (originalLinkHRef != undefined)
                        link.attr('href', originalLinkHRef);

                    // restore the original 'onclick' value
                    if (originalLinkOnClick != undefined)
                        link.attr('onclick', originalLinkOnClick);

                    // remove temporary attributes
                    link.removeAttr('tmphref').removeAttr('tmponclick');

                    // remove the class decorating disabled links
                    link.removeClass('disabledLink');
                });
        }
    </script>
</head>

The methods DisableLinks and EnableLinks work successfully in different browsers. The css-class disabledLink allows to define the style of disabled link.

Below the sample of usage:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    // the head is the same as it was in previous listing
</head>
<body>
    <a id="disableLinks" href="#" onclick="DisableLinks($('#linkDiv a')); $('#enableLinks').show(); $('#disableLinks').hide(); return false;">Disable the rest of links</a>
    <a id="enableLinks" style="display:none" href="#" onclick="EnableLinks($('#linkDiv a')); $('#enableLinks').hide(); $('#disableLinks').show(); return false;">Enable the rest of links</a>
    <br />
    <br />
    <br />
    <div id="linkDiv">
        <a href="http://google.com" onclick="alert('Transfer to www.google.com');">Goooogle</a>
        <br />
        <a href="#" onclick="alert('Hello!'); return false;">Hello, alert!</a>
        <br />
    </div>
</body>
</html>

Links are enabled

Links are enabled

Links are disabled

Links are disabled

Related posts:
 
  1. wizx20
    February 21st, 2012 at 06:29 | #1

    Use the following code when you do not want the function DisableLinks to empty and overwrite your temphref when calling DisableLinks multiple times.

    function DisableLinks(links) {
    links.each(
    function (index, linkDomElement) {
    var link = $(linkDomElement);
    if (link.attr(‘tmphref’) == undefined)
    {

  1. No trackbacks yet.