why is the code providing multiple option for the child1 radiobuttons ??? i dont want that
<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>Script:</p>

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

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

<p><a href="http://jsfiddle.net/alexdickson/VqtKb/" rel="nofollow">jsFiddle</a>.</p>
