jquery - 使用 JQuery 选中父列表项中的复选框？

Question

我对 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();
    });
});

如你所见，我并没有走得太远。任何帮助将不胜感激。

谢谢!

Answer 1

根据您发布的标记，这将起作用:

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

另请注意:

• 您有数字 ID 和重复 ID，分别是invalid .
• 您没有任何名为“child”的类(class)在您的文档中。
• .toggle “显示或隐藏匹配的元素”。它不会切换其“禁用”属性。

在这里试试:http://jsfiddle.net/karim79/QfTfr/