Conditional Disable / Re-Enable jQuery click event

Question

I've got a problem with disabling and re-enabling click events on links.

The setup is 4 columns in a row, each column containing a link and hidden content box. When you click a link, it expands the row and displays content box specific to that column. Once a link is clicked and the row expanded, all of the other links are then faded out. You would then re-click the open link to close the row and un-fade the other links.

I've setup a working fiddle of this scenario which should help explain it...

http://jsfiddle.net/r8K78/2/

$('.open-box').click(function(event) {
    event.preventDefault();

    var $list_row = $(this).parents('.row'),
        $column_box = $(this).parent('.column').find('.box');

    if ( $(this).is('.open') ) {
        $(this).removeClass('open');
        $list_row.stop().animate({ 'padding-bottom': 0 }, 100).removeClass('expanded');
        // hide the content box
        $column_box.hide();
        // find all links and fade them in
        $('.box-list').find('.box-link').fadeTo(100, 1).addClass('open-box');
    } else {
        $(this).addClass('open');
        $list_row.stop().animate({ 'padding-bottom': 200 }, 100, function() {
            // show the content box
            $column_box.fadeIn(100);
        }).addClass('expanded');
        // find all links and fade them out
        $('.box-list').find('.box-link').not(this).fadeTo(100, 0.25).removeClass('open-box');
    }
});

What I'm trying to do is disable the click event on all the faded out links, leaving the open link as the only click-able link. As you can see, the behavior of clicking a faded out link makes the whole thing go batty.

I've tried setting .off('click') on the open action (else) which does the job of disabling the click on the other links. And put .on('click') on the close action. After the close action runs, the other links are still not clickable.

Any help on figuring this out would be hugely appreciated!

Answer 1

You could just check for opacity:

if ($(this).css('opacity') < 1) return;

SEE

But better would be to set a class on faded out elements and check for this class instead, making code more readable/maintanable.

DEMO