Use JQuery to check a checkbox in a parent list-item?

Question

I\'m brand new to Javascript and JQuery, so I\'ve been reading up on it and am trying to check (and set inactive) a checkbox in a parent list-item when one of the children a

Answer 1

Based on your posted markup, this will work:

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

Also note:

• You have numeric and duplicate IDs, which are invalid.
• You do not have any class named 'child' in your document.
• .toggle "displays or hides matched elements". It does not toggle their 'disabled' property.

Try it here: http://jsfiddle.net/karim79/QfTfr/

Answer 2

Check this 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", "");
    }
})

If you are using the id property for elements, you have to make sure that it has a unique value in the document.

Answer 3

Try this:

<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>

Answer 4

the .parent() method returns only the immediate parent DOM element of your current selector. The .parents() method will search up the DOM tree to find any parent elements that match the selection. So $(".bar").parents(".foo") would select for all parent elements with Class "foo" of any elements with class "bar".

First give your target parent element an identifable attribute, either a class or an id. If you were dealing with IDs, you wouldn't need parents(), so use a class.

$(".child").click(function(){
  $(this).parents('.parentclass').toggle();
});