How to enable/disable link with prototype observe

As mentioned in this link Disable link with the prototype observe m开发者_StackOverflow社区ethod

If the link is disabled using the observe method how is it possible to enable it.

Thanks

Your best bet is probably to use a flag; alternately you can add and remove a handler. Or probably about 15 other ways. :-)

Using a Flag

var link = /* ...get reference to link, e.g. $('the_links_id') or whatever */;
link.observe('click', function(event) {
    if (this.readAttribute("data-disabled")) {
        event.stop();
    }
});

// Disabling the link:
link.setAttribute("data-disabled", 1);

// Enabling the link:
link.removeAttribute("data-disabled");

That uses an attribute called data-disabled (using the data- prefix to be HTML5-compatible) which if present and truthy disables the link.

If you don't mind sticking properties on element instances, you can do it without using an attribute:

var link = /* ...get reference to link, e.g. $('the_links_id') or whatever */;
link.observe('click', function(event) {
    if (this.disabled) {
        event.stop();
    }
});

// Disabling the link:
link.disabled = true;

// Enabling the link:
link.disabled = false;

Putting properties on element instances works in all popular browsers, but some people frown on it, hence using an attribute above.

Adding/Removing a Handler

// General purpose "stop the event" handler
function stopEvent(event) {
    event.stop();
}

// Disabling the link:
link.observe('click', stopEvent);

// Enabling the link:
link.stopObserving('click', stopEvent);