Here is what I've created: /

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 bee 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>

Here is what I've created: http://jsfiddle/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 bee 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>

• javascript
• jquery

Share Improve this question Follow asked Nov 4, 2011 at 11:48 highchartsdudehighchartsdude 57133 gold badges1010 silver badges1616 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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

Pertinent change:

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

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

Check this http://jsfiddle/ktSA9/2/