on click of id=checkMain i want “child”(checkboxes) to get enabled and “child1”(radio buttons) to be disabled
<p>HTML:</p>

<pre><code>&lt;input type="radio" id="chkMain" name="chkMain"/&gt;
&lt;input type="radio" id="chkMain1" name="chkMain" /&gt;
&lt;input type="radio" id="chkMain2" name="chkMain" /&gt;

&lt;input class="child" type="checkbox" id="chk1" disabled="true" /&gt;
&lt;input class="child" type="checkbox" id="chk2" disabled="true" /&gt;
&lt;input class="child" type="checkbox" id="chk3" disabled="true" /&gt;
&lt;input class="child" type="checkbox" id="chk4" disabled="true" /&gt;
&lt;input class="child" type="checkbox" id="chk5" disabled="true" /&gt;
&lt;input class="child" type="checkbox" id="chk6" disabled="true" /&gt;
&lt;input class="child" type="checkbox" id="chk7" disabled="true" /&gt;

&lt;input class="child1" type="radio" id="tone1" disabled="true"/&gt;
&lt;input class="child1" type="radio" id="tone2" disabled="true"/&gt;
&lt;input class="child1" type="radio" id="tone3" disabled="true"/&gt;
</code></pre>

<p>Javascript:</p>

<pre><code>$(function(){
    $("input:radio[id=checkMain]").click(function(){
        if (this.checked) {
            $("input:checkbox.child").removeAttr("disabled");
        }
        else {
             $("input:checkbox.child, input:radio.child1").attr("disabled", "enabled");

        }
    });
});
</code></pre>

<p>when i 1st click on id=checkMain then later click on id=checkMain1 it works perfectly.but when i 1st click on id=checkMain1 then on id=checkMain i want the child1 to get disabled </p>
