jQuery bindWhen

by mmarcon

HTML

<ul id="list-0">
    <li><a href="#0" id="p0">P0</a></li>
    <li><a href="#1" id="p1" class="disabled">P1</a></li>
    <li><a href="#2" id="p2">P2</a></li>
</ul>

<ul id="list-1">
    <li><a href="#3" id="p3">P3</a></li>
    <li><a href="#4" id="p4" class="disabled">P4</a></li>
    <li><a href="#5" id="p5">P5</a></li>
</ul>

CSS

a {
    display: block;
    width: 30px;
    height: 30px;
    padding: 5px;
    border-radius: 4px;
    text-decoration: none;
    color: #fff;
    background-color: #111;
    font-size: 18px;
    line-height: 30px;
    margin: 10px;
    font-family: helvetica;
    font-weight: 100;
    text-align: center;
}

a.disabled {
    background-color: #ccc;
}

ul {
    float: left;
}

JavaScript

(function($) {
    $.fn.bindWhen = function(event, callback, when) {
        return this.each(function() {
            if ($.isFunction(when) && $.isFunction(callback)) {
                $(this).bind(event, function(){
                    if (when.apply(this)) {
                        callback.apply(this);
                    }
                });
            }
            else {
                $(this).bind(event, callback);
            }
        });
    }
})(jQuery);

$(function(){
    $('#list-0 a').bindWhen('click', function(){
        alert($(this).text());
    }, function(){
        return !$(this).hasClass('disabled');
    });
    $('#p0').click(function(){$('#p1').toggleClass('disabled')});
    
    $('#list-1 a').bind('click', function(){
        if(!$(this).hasClass('disabled')) {
            alert($(this).text());
        }
    });    
    $('#p3').click(function(){$('#p4').toggleClass('disabled')});
});