jquery removeClass, только если все флажки одного и того же набора (с тем же классом?) сняты

Question

Эта проблема

Когда флажок снят, если установлены другие флажки из того же набора (с тем же классом?), Класс не должен быть удален. Пожалуйста, обратите внимание, что есть несколько наборов флажков.

(Частично) рабочая скрипка

http://jsfiddle.net/mirluin/3MpYw/1/

HTML-код

<form method="get" action="#" class="taxonomy-drilldown-checkboxes">
    <div class="btn-group taxonomy-search-btn" id="terms-clipping_bu">
        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
            Business Units
            <span class="caret"></span>
        </a>

        <ul class="dropdown-menu">
            <li class="term-item ">
                <label>
                <input type="checkbox" name="qmt[clipping_bu][]" value="4" checked="checked" />Bu1</label>
            </li>
            <li class="term-item ">
                <label>
                <input type="checkbox" name="qmt[clipping_bu][]" value="27" checked="checked" />Bu2</label>
            </li>
            <li class="term-item ">
                <label>
                <input type="checkbox" name="qmt[clipping_bu][]" value="31" />Bu3</label>
            </li>
        </ul>
    </div>

    <div class="btn-group taxonomy-search-btn" id="terms-clipping_market">
        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
            Markets
            <span class="caret"></span>
        </a>

        <ul class="dropdown-menu">
            <li class="term-item ">
                <label>
                <input type="checkbox" name="qmt[clipping_market][]" value="34" />UK</label>
            </li>
            <li class="term-item current-term">
                <label>
                <input type="checkbox" name="qmt[clipping_market][]" value="57" checked="checked" />France</label>
            </li>
            <li class="term-item current-term">
                <label>
                <input type="checkbox" name="qmt[clipping_market][]" value="65" checked="checked" />Germany</label>
            </li>
        </ul>
    </div>

    <p>
        <input class="btn btn-primary" type="submit" value="Submit" /> <a class="taxonomy-drilldown-reset btn btn-info" href="#">Reset</a>
    </p>
</form>

Javascript

jQuery(document).ready(function ($) {

    // verify if any checkboxes are checked, if so highlight the dropdown link
    $(':checkbox:checked').each(function () {

        var $check = $(this),
        $ul = $check.parents('ul.dropdown-menu'),
        $div = $ul.siblings('a.btn.dropdown-toggle');

        if ($check.prop('checked')) {
            $div.addClass('btn-warning');
        }
    });

    // on every click on checkboxes...
    $('.taxonomy-drilldown-checkboxes input[type=checkbox] ').change(function () {

        var $check2 = $(this),
        $ul = $check2.parents('ul.dropdown-menu'),
        $div = $ul.siblings('a.btn.dropdown-toggle');

        // if adding a checkbox highlight the dropdown link 
        if ($check2.prop('checked')) {

            $div.addClass('btn-warning');

            // if removing a checkbox, remove the class
            // only if all checkboxes *of the same set* are unchecked too
        } else {

            $div.removeClass('btn-warning');
        }
    });
});

CSS

Ничего фантастического!

.btn-warning {
    background-color: #faa732;
}

Answer 1

У вас это почти получилось, вам просто нужно проверить, есть ли еще флажок, когда вы снимаете галочку, вместо:

else {

    $div.removeClass('btn-warning');
}

Вы положили

else if($ul.find('input[type="checkbox"]:checked').length == 0){

    $div.removeClass('btn-warning');
}

Это позволит найти количество отмеченных флажков в текущем ul и, если оно будет равно 0, удалит класс. Пример здесь: http://jsfiddle.net/3MpYw/2/