on click of id=checkMain i want “child”(checkboxes) to get enabled and “child1”(radio buttons) to be disabled

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" disa开发者_如何转开发bled="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"/>

Javascript:

$(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");

        }
    });
});

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

---

It is simple - add the value attribute to your radio buttons as follow:

<input type="radio" id="chkMain"  name="chkMain" value="main1"/>
<input type="radio" id="chkMain1" name="chkMain" value="main2"/>
<input type="radio" id="chkMain2" name="chkMain" value="main3"/>

than in your JQuery code do something along the lines:

if( $('#chkMain').val() == 'main1' )
{
    $('.child').removeAttr('disabled');
    $('.child1').attr('disabled', 'disabled');
}
else
{
    $('.child').attr('disabled', disabled');
    $('.child1').removeAttr('disabled', 'disabled');
}

---

Rewrite your html like:

<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="disabled" />
<input class="child" type="checkbox" id="chk2" disabled="disabled" />
<input class="child" type="checkbox" id="chk3" disabled="disabled" />
<input class="child" type="checkbox" id="chk4" disabled="disabled" />
<input class="child" type="checkbox" id="chk5" disabled="disabled" />
<input class="child" type="checkbox" id="chk6" disabled="disabled" />
<input class="child" type="checkbox" id="chk7" disabled="disabled" />

And js like so:

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

        }
    });
});

Try here: http://jsfiddle.net/X6JxC/2/