Проверка всех непосредственных родительских флажков в JQuery

Question

У меня есть структура вложенного списка. Мое дерево может перейти на уровень n.

Мне нужен селектор JQuery, который может выбирать только родителей, если отмечен ребенок.

<ul id="treeFeatureList">
<li>
    <input type="checkbox" name="selectedRole">
    Application Manager
    <ul>
        <li>
            <input type="checkbox" name="selectedRole">
            Application Manager Panel
        </li>
        <li>
            <input type="checkbox" name="selectedRole">
            Client Role
            <ul>
                <li>
                    <input type="checkbox" name="selectedRole">
                    Client Task 1
                </li>
                <li>
                    <input type="checkbox" name="selectedRole">
                    Client Task 2
                </li>
            </ul>
        </li>
    </ul>
</li>
</ul>

Что я хочу: Если проверен клиент Task1 или Task2, также проверены роль клиента и диспетчер приложений. Определенно, это не панель диспетчера приложений (она должна оставаться неконтролируемой).

Помощь в создании этого волшебного селектора.

Answer 1

$('input[type="checkbox"]').change(function() {
    if ($(this).is(':checked')) {
        $(this).parents('ul').siblings('input:checkbox').attr('checked', true);
    }
    else
    {
        $(this).parents('ul').siblings('input:checkbox').attr('checked', false);
    }
});

Здесь - демонстрационная версия.

Answer 2

Сочетание .closest() и .siblings() должно дать вам то, что вы ищете. Вы захотите выбрать ближайшего предка проверенного ввода, который является родным с флажком «родитель», затем перейдите к этому флажку. Код будет выглядеть примерно так:

$('input:checkbox').change(function() {
    //if you are using < jQuery 1.6, use .attr() instead of .prop()
    if (this.checked) {
        $(this).closest('ul').siblings('input:checkbox').prop('checked', true);
    }
});

Вот живая демонстрация ->

Answer 3

$('input[type="checkbox"]').change(function() {
if ($(this).is(':checked')) {
    $(this).parents('ul').siblings('input:checkbox').attr('checked', true);
} else {
        //if any of the sibling is checked, do not  uncheck the main category
        var isSiblingChecked = false;
        $(this).parent().siblings().each(function() {
            if (($(this).find('input[type="checkbox"]').is(':checked'))) {
                isSiblingChecked = true;
            }
        });     
        if (isSiblingChecked == false) {            
    $(this).parents('ul').siblings('input:checkbox').attr('checked', false);
        }
}
});