Disable a linked element in jQuery and then Enable it later on

Question

I have the following link element on a web page.How would I disable this using jQuery? It seems setting the disabled attribute does not disable it.

<A style="COLOR: black" href="javascript:__doPostBack('GridViewWithLinkqToSQL','Page$20')">20</A>

EDIT 1: ANSWER (with a fully functional sample page code)

Finally, I was able to enable/disable links. To enable simply attach a click handler in which default action of event is disabled, and for enabling remove the same click handler. In my code below, Link1 will open yahoo home page, while Link2 will show a javascript error, when both these links are enabled.

Html page code with necessary javascript/jQuery is as below. Using this approach you can enable/disable multiple hyperlinks within a div ( as in a Grid control). Here's a link to a video that will show a situation in which disabling and enabling links can be very useful: Disable all hyperlinks within a GridView during AJAX Postback. You will notice in the video that when user clicks on column header links or page number links, it doesn't do anything, which is what we want when a long AJAX postback happens and user starts to impatiently click on links.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Enable/Disable Links</title>
     <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>
    <div id="div1">
        <a href="https://www.yahoo.com">Link1</a>
        <a style="COLOR: black" href="javascript:__doPostBack('GridViewWithLinkqToSQL','Page$20')">Link2</a>
    </div>
    <input id="Button1" type="button" value="Disable Links" onclick="ToggleLinks(true);" />
    <input id="Button2" type="button" value="Enable Links" onclick="ToggleLinks(false);" />
    <script type="text/javascript">
        function ToggleLinks(disabled) {
            var div1 = $('#div1');

           // div1.find("*").prop("disabled", disabled);
            if (disabled) {
                div1.find("a").each(function (i, element) {
                    $(this).click(function (e) {
                        e.preventDefault();
                        return false;
                    });
                });
            }
            else {
                 div1.find("a").each(function (i, e) {
                    $(this).unbind("click");
                });
            }
        }
    </script>
 </body>
</html>

Have you checked [these](http://stackoverflow.com/questions/970388/jquery-disable-a-link?rq=1) [questions](http://stackoverflow.com/questions/3788946/how-do-i-dynamically-enable-disable-links-with-jquery?rq=1)? — summea, Jan 14 '14 at 21:00

score 3 · Answer 1 · answered Jan 14 '14 at 21:02

3

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

Here is working fiddle: http://jsfiddle.net/g5Mkj/

answered Jan 14 '14 at 21:02

Hüseyin BABAL

15,400
4
51
73

score 2 · Answer 2 · answered Jan 14 '14 at 21:02

2

There is no attribute on a link that you could set to disable it. What you can do is remove it's href attribute.

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

Or you can set a click event on it that cancels the event propagation:

$('#yourAnchorId').click(function(event) {
     event.preventDefault();
});

answered Jan 14 '14 at 21:02

AxiomaticNexus

6,190
3
41
61

2

Note that removing the HREF attribute does the same as preventDefault() but removes the "cursor: pointer" usually on anchors. If you need to remember the HREF attribute, it might be simplier to just "e.preventDefault()"! – Bene Jan 14 '14 at 21:15

Disable a linked element in jQuery and then Enable it later on

2 Answers2