the chk_all dosnt work to enable all other child boxes for the first attempt

<input type="checkbox" id="checkMain" />
<p><input type="checkbox" id="checkMain1" />
<p><input type="checkbox" id="checkMain2" />

<P><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="chk_all" disabled="true" />ALL</p>
</html>








$
        (
            function()
            {           
                $("input[id^=checkMain]").click 
                ( 
                    function() 
                    {               
                        var otherCks = $("input[id^=checkMain]").not(this);
                          if( !$(this).is( ":checked" ))
                        {                        
                            $(".child").attr("disabled" , true ); 
             开发者_如何转开发                 $(function()
                                        {
                                            $("#chk_all").click(function()
                                                 {
                                                    var checked_status=this.checked
                                                    $("input[id^=chk]").each (function()
                                                      {
                                                       this.checked=checked_status;
                                                       });
                                                  });
                                         }
                                    );                             
                            otherCks.removeAttr ( "disabled" );
                          }                   
                        else
                        {                        
                            $(".child").removeAttr ( "disabled" );                  
                            otherCks.attr("disabled" , true)

                        }          

                    }
                );      
            }
        );

I'm not sure I understand what's going on, but maybe this is what you want:

$(function() {
    $("input[id^=checkMain]").click(function () {
        var otherCks = $("input[id^=checkMain]").not(this);
        if (!$(this).is(":checked")) {
            $(".child").attr("disabled", true);
            otherCks.removeAttr("disabled");
        } else {
            $(".child").removeAttr("disabled");
            otherCks.attr("disabled", true)
        }
    });
    $("#chk_all").click(function() {
        var checked_status = this.checked;
        $("input[id^=chk]").each(function () {
            this.checked = checked_status;
        });
    });
});

I moved the $("#chk_all") click handler to run when the document is loaded instead of when you click one of the first set of checkboxes. I also made the code a little easier to read.

click event is encapsulated in $("#chk_all").click event enclosure, and is loaded when first time check box is clicked. Place if condition instead of $("#chk_all").click(function()