Question

HTML:

<input type="radio" id="chkMain" name="chkMain"/>
<input type="radio" id="chkMain1" name="chkMain" />
<input type="radio" id="chkMain2" name="chkMain" />

<input class="child" type="checkbox" id="chk1" disabled="true" />
<input class="child" type="checkbox" id="chk2" disabled="true" />
<input class="child" type="checkbox" id="chk3" disabled="true" />
<input class="child" type="checkbox" id="chk4" disabled="true" />
<input class="child" type="checkbox" id="chk5" disabled="true" />
<input class="child" type="checkbox" id="chk6" disabled="true" />
<input class="child" type="checkbox" id="chk7" disabled="true" />

<input class="child1" type="radio" id="tone1" disabled="true"/>
<input class="child1" type="radio" id="tone2" disabled="true"/>
<input class="child1" type="radio" id="tone3" disabled="true"/>

Script:

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

        }
  });
});

jsFiddle.

Answer 1

You need to add a “name” attribute to your radio buttons that indicate how they are grouped like:

<input class="child1" type="radio" id="tone1" name="group1" disabled="true"/>
<input class="child1" type="radio" id="tone2" name="group1" disabled="true"/>
<input class="child1" type="radio" id="tone3" name="group1" disabled="true"/>

Working sample here: http://jsfiddle.net/rniemeyer/dLT5n/

Also changed if statement to match “chkMain” instead of “checkMain” and the else statement changed to .attr(“disabled”, true) so the value is set.