Question

How do I select each child checkbox inside a paragraph named id=”Paragraph1″ and uncheck it if its checked and then disable it in jQuery.

Example:

<input type="checkbox" id="chkMain"><br />
<p id="Paragraph1">
    <input type="checkbox" id"chk1"><br />
    <input type="checkbox" id"chk2"><br />
    <input type="checkbox" id"chk3"><br />
    <input type="checkbox" id"chk4"><br />
</p>

jQuery selection:

$("#chkMain:not(:checked)").change(function() {
    $("#Paragraph1").children("input[type='checkbox' :checked]").each(function() {
        $(this).removeAttr("checked").attr("disabled",disabled");     
    });
});

This code isn’t working right b/c its only working half the time for some reason in IE8. Also using find is not working right either maybe b/c a paragraph is not a good parent.

Answer 1

input[type='checkbox' :checked] is not correct selector.

It should be:

input[type='checkbox']:checked

And I think you can simplify the code like:

$('#Paragraph1 input[type="checkbox"]:checked')  // select all checked input
                    .removeAttr('checked')       // remove checked attribute
                    .prop('disabled', true);     // make em disabled