Использовать JQuery, чтобы установить флажок в родительском элементе списка? - PullRequest
Новая
       8

Использовать JQuery, чтобы установить флажок в родительском элементе списка?

5 голосов
/ 05 января 2011

Я новичок в Javascript и JQuery, поэтому я читал об этом и пытаюсь установить (и отключить) флажок в родительском элементе списка, когда проверяется один из дочерних элементов.

Если это не имеет никакого смысла, взгляните на структуру списка. 

<ul>
    <li><input type="checkbox" name="items[]" value="88712003" id="88712003"  /> Parent 1</li>
    <li><input type="checkbox" name="items[]" value="88712003" id="88712003"  /> Parent 2
        <ul>
            <li><input type="checkbox" name="items[]" value="21312341" id="21312341" /> Child 1</li>
            <li><input type="checkbox" name="items[]" value="21312341" id="21312341" /> Child 2</li>
        </ul>
    </li>
    <li><input type="checkbox" name="items[]" value="88712003" id="88712003"  /> Parent 3</li>
    <li><input type="checkbox" name="items[]" value="88712003" id="88712003"  /> Parent 4</li>
</ul>

Если отмечен «Дочерний 1» или «Дочерний 2», я хочу, чтобы входные данные в «Родителе 2» были проверены и неактивны. Я начал работать над этим, но застрял здесь: 

$(function(){
    $('.child').click(function() {
        $(this).parent().parent().parent().toggle();
    });
});

Как видите, я далеко не ушел. Любая помощь будет оценена.

Спасибо!

Ответы [ 4 ]

5 голосов
/ 05 января 2011

На основании вашей разметки это будет работать: 

$('ul > li ul li > :checkbox').change(function() {
    $(this).parents('li:last')
           .children("input")
           .attr("disabled", this.checked);
});

Также обратите внимание:

  • У вас есть числовые и повторяющиеся идентификаторы, которые недействительны .
  • У вас нет класса с именем child в вашем документе.
  • .toggle «отображает или скрывает согласованные элементы». не переключает их свойство 'disabled'.

Попробуйте здесь: http://jsfiddle.net/karim79/QfTfr/

4 голосов
/ 05 января 2011

Попробуйте это: 

<script type="text/javascript">
$(function(){
    $('li ul input[type=checkbox]').click(function() {
                var that = $(this);
                var parentUL = that.parent().parent();
        var parentChk = parentUL.parent().find("input:first");
                var oneChecked = false;
                parentUL.find("input").each(function(){oneChecked = oneChecked || this.checked;});
                console.log(oneChecked);
                parentChk.attr("checked", oneChecked);
    });
});
</script>
2 голосов
/ 05 января 2011

метод .parent () возвращает только непосредственный родительский элемент DOM вашего текущего селектора. Метод .parents () будет искать дерево DOM, чтобы найти любые родительские элементы, которые соответствуют выбору. Поэтому $ (". Bar"). Parent (". Foo") будет выбирать для всех родительских элементов с классом "foo" любые элементы с классом "bar".

Сначала дайте вашему целевому родительскому элементу идентифицируемый атрибут, либо класс, либо идентификатор. Если вы имеете дело с идентификаторами, вам не нужны родители (), поэтому используйте класс. 

$(".child").click(function(){
  $(this).parents('.parentclass').toggle();
});
0 голосов
/ 05 января 2011

Проверьте это fillde 

$("input:checkbox + ul input:checkbox").click(function(){
    var $ul = $(this).closest("ul");
    var $parent = $ul.prev("input:checkbox");
    if($ul.find("input:checkbox:checked").length > 0){
        $parent.attr("checked", "checked");
    }else{
        $parent.attr("checked", "");
    }
})

Если вы используете свойство id для элементов, вы должны убедиться, что оно имеет уникальное значение в документе.

...