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

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>

Share Improve this question asked Nov 4, 2011 at 11:48 highchartsdude 5713 gold badges10 silver badges16 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/

Programmer puzzle solving

javascript - How do I disable and enable list items depending on the filter in jquery? - Stack Overflow

3 Answers 3

Articles related to this article

comment list (0)