Disabling links with JQuery

Question

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>

Answer 1

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; });

Answer 2

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

Answer 3

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.