CODEWITHSUNDEEP
jqueryasp.net-mvc
dswatik
dswatik

Reputation: 9209

Disabling links with JQuery

I have the following code which does a function similar to the way the comment link works here on Stackoverflow... when clicked it triggers a ActionResult and populates a div

   $(function() {
        $("a[id ^='doneLink-']").live('click', function(event) {
            match = this.id.match(/doneLink-(\d+)/);
            container = $("div#doneContainer-" + match[1])
            container.toggle();

            if (container.is(":visible")) {
                container.load($(this).attr("href"));
            } else {
                container.html("Loading...");
            }
            event.preventDefault();
        });
    });

I want to be able to do one things change the link text that of which they clicked on to say something like "Hide" and also disable other links in the little menu that this link resides.

Edit: The source to go with this function looks like this

<div id="dc_lifelistmenu"style="float:left;padding-bottom:5px;font-size:10pt;width:400px;">
    <a href="/entries/addentry/86">Add Entry</a> | 
    <a href="/goals/adddaimoku/86" id="daimokuLink-2">Log Daimoku</a> | 
    <a href="/goals/done/86" id="doneLink-2">Mark Completed</a> |
    <a href="/goals/remove/86">Remove</a>
</div><br />
<div id='daimokuContainer-2' style="display:none;">  Loading...</div>
<div id='doneContainer-2' style="display:none;">  Loading...</div>

Upvotes: 5

Views: 30560

Answers (4)

roman
roman

Reputation: 11

The simplest way to disable anchor is the usage of disabled-attribute, but problem is the given attribute is supported only by IE. It will not work in FireFox, for example. If you want your code to work in different browsers, you can try to save the values of href and onclick attributes into other custom attributes, then to set href="#" and onclick="return false;". Enabling back you should restore saved values of href and onclick. For visual effect you can use applying specila css-class. I described this approach in my blog - Disable hyperlink

Upvotes: 1

Will
Will

Reputation: 91

If you want to remove the link instead of disabling it:

jQuery('#path .to .your a').each(function(){
    var $t = jQuery(this);
    $t.after($t.text());
    $t.remove();
});

Notes:

  • You can also use function(k,v) to grab an iterator and the element without using 'this'
  • Feel free to replace jQuery with $ if you are using the default namespace
  • var $t = jQuery(this) is a caching function which references the element and also helps clean up the code
  • it is a good practice to precede variables which are actually jQuery items with a $ to help keep them separated visually in the code. It also helps you recognize that you can call methods on them.

    • Upvotes: 9

    alphadogg
    alphadogg

    Reputation: 12920

    To modify the link's text inside your function, simply use:

    this.text('New Text!');

    To disable other text, we'd have to see the source of the page. I'm not sure what you mean by "other links"...

    UPDATE: Based on your edit, then I guess what you want:

    $(function() {
        $("a[id ^='doneLink-']").live('click', function(event) {
            match = this.id.match(/doneLink-(\d+)/);
            container = $("div#doneContainer-" + match[1])
            container.toggle();

            if (container.is(":visible")) {
                container.load($(this).attr("href"));
            } else {
                container.html("Loading...");
            }
            event.preventDefault();
            // added
            this.text('Hide');
            // disable others manually, repeat and adjust for each link
            $("#daimokuLink-" + match[1]).toggle();
            // or in one shot, all but the one I clicked
            $("#dc_lifelistmenu:not(#doneContainer-" + match[1] + ")").toggle(); 
        });
    });

    UPDATE 2: Saw your comment. To disable a link instead of hiding it, then disable the onclick by overriding it, instead of using toggle(). 

    $("#daimokuLink-" + match[1]).click(function() { return false; });

    Upvotes: 4

    kkubasik
    kkubasik

    Reputation: 3734

    There are a few ways to approach this, probably the easiest is to just do something like: $('a').filter('not:#doneLink').hide(); to hide all links that are not the one you have specified above.

    Check out this page for more on jQuery selectors:

    http://docs.jquery.com/Selectors

    Upvotes: 3

    Related Questions