CODEWITHSUNDEEP
jquerylistinputcheckbox
user316602
user316602

Reputation:

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

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 are checked.

If this doesn't make any sense, take a look at the list structure.

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

If Child 1 or Child 2 is checked, I want the input in Parent 2 to be checked and set inactive. I've started working on it, but got stuck here:

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

As you can see, I didn't make it far. Any help would be appreciated.

Thanks!

Upvotes: 5

Views: 10978

Answers (4)

Arun P Johny
Arun P Johny

Reputation: 388416

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.

Upvotes: 0

Chandu
Chandu

Reputation: 82933

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>

Upvotes: 3

karim79
karim79

Reputation: 342695

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/

Upvotes: 4

huntar
huntar

Reputation: 1112

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

Upvotes: 2

Related Questions