How do I disable and enable list items depending on the filter in jquery?

Question

Here is what I've created: http://jsfiddle.net/zidski/ktSA9/

I want to enable and disable the links depending on the filter - 'All Years' starts off disabled as all the years are showing - if I click on 2010 All years should become enabled and so on.

<ul name="yearfilter" id="yearfilter">
<li value=""><a data-value="" href="#" class="disable">All years</a></li>
<li value="2011"><a data-value="2011" href="#">2011</a></li>
<li value="2010"><a data-value="2010" href="#">2010</a></li>
</ul>

Answer 1

I have updated your fiddle: http://jsfiddle.net/ktSA9/4/

Pertinent change:

$("#yearfilter a").removeClass("disable");
$(this).addClass("disable");

Answer 2

Something like this should do the trick:

$("#yearfilter a").bind('click', function() {
    $("#yearfilter a").removeClass('disable');
    $(this).addClass('disable');
});

EDIT: Changed the above to bind to the anchor elements instead of the list items.

Essentially you just need to add the following two lines to your existing function:

$("#yearfilter a").removeClass('disable');
$(this).addClass('disable');

Answer 3

检查此http://jsfiddle.net/ktSA9/2/