jquery removeClass doesn't seem to work

Question

While firstli.hasClass('selected') does work and retrieves the correct element. The removeClass function doesn't seem to remove to the class. When an element is unchecked I would like the first li to be unchecked as well.

Here is the jfiddle (the code is at the bottom)

Note: I want "Select All" to become unchecked when you uncheck one of the other options.

var firstli = $('.dropdown-menu.inner li').first();
firstli.click(function(event) {   
    if (!firstli.hasClass('selected')) {    
        $('.selectpicker').selectpicker('selectAll');       
    }
    else {
        $('.selectpicker').selectpicker('deselectAll');
    }
    return false;
});

var alllis = $('.dropdown-menu.inner li:not(:first-child)');

alllis.click(function(event) {
    if ($(this).hasClass('selected')) {    
        alert(firstli.hasClass('selected')); //true
        firstli.removeClass('selected');
    }
});

Answer 1

Your problem is with setSelected() rechecking the Select All option. To fix this, I changed that function to the following:

setSelected: function (c, d) {
    if (d) {
        this.$menu.find("li").eq(c).addClass("selected")
    } else {
        this.$menu.find("li").eq(c).removeClass("selected")
        this.$menu.find("li:first-child").removeClass("selected")
    }
}

Basically, if it has to remove the selected class, you know they're not all checked. This works.

http://jsfiddle.net/eC8hF/30/