Javascript Client side validation in asp.net
<p>I have list of check-box related to dropdownlists and chek box related to group of radio-button. Code sample is this:</p>

<pre><code>  &lt;table class="style1"&gt;
        &lt;tr&gt;
            &lt;td class="style10" colspan="6"&gt;
                &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td class="style6"&gt;
                &lt;asp:CheckBox ID="chkBoxChanl" AutoPostBack="false" 
                    runat="server" Text="Channel" 
                    CssClass="ChkBoxStyle" Font-Size="Small" 
                     /&gt;&amp;nbsp;&lt;/td&gt;
            &lt;td class="style7"&gt;
                &lt;asp:DropDownList ID="ddlChannel" runat="server" CssClass="ddl"&gt;
                &lt;/asp:DropDownList&gt;&amp;nbsp;&lt;/td&gt;
            &lt;td class="style6"&gt;
                 &lt;asp:CheckBox ID="chkBoxParty" runat="server" Text="Party" 
                     CssClass="ChkBoxStyle" Font-Size="Small" /&gt;&amp;nbsp;&lt;/td&gt;
            &lt;td class="style7"&gt;
                &lt;asp:DropDownList ID="ddlParty" runat="server" CssClass="ddl"&gt;
                &lt;/asp:DropDownList&gt;&amp;nbsp;&lt;/td&gt;
            &lt;td class="style13"&gt;
                &lt;asp:CheckBox ID="chkBoxContntTyp" runat="server" Font-Bold="True" 
                    Text="Content Type" CssClass="ChkBoxStyle" Font-Size="Small"/&gt;&amp;nbsp;&lt;/td&gt;

            &lt;td class="style8" rowspan="2"&gt;
                &lt;asp:RadioButton ID="rdBtnNews" runat="server" Text="News" CssClass="RadioGroup" /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 
                &lt;asp:RadioButton ID="rdBtnTicker" runat="server" Text="Ticker" CssClass="RadioGroup" /&gt;&amp;nbsp;&amp;nbsp;&lt;asp:RadioButton ID="rdBtnBreakingNews"
                            runat="server" Text="Breaking News" CssClass="RadioGroup" /&gt;
                &lt;/br&gt;&lt;/br&gt;&lt;asp:RadioButton ID="rdBtnBeeper" runat="server" Text="Beeper" CssClass="RadioGroup" /&gt;&amp;nbsp;&amp;nbsp;&lt;asp:RadioButton 
                    ID="rdBtnTalkshow" runat="server" Text="TalkShow" CssClass="RadioGroup" /&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td class="style6"&gt;
                &lt;asp:CheckBox ID="chkBoxDate" runat="server" Font-Bold="True" Text="Date" 
                    CssClass="ChkBoxStyle" Font-Size="Small" /&gt;&amp;nbsp;&lt;/td&gt;
            &lt;td class="style7"&gt;
                &lt;asp:TextBox ID="tbFrom" runat="server" CssClass="tbDate"&gt;&lt;/asp:TextBox&gt;&lt;asp:Label ID="Label5"
                    runat="server" Text="To"&gt;&lt;/asp:Label&gt;&lt;asp:TextBox ID="tbTo"
                    runat="server" CssClass="tbDate"&gt;&lt;/asp:TextBox&gt;&amp;nbsp;&lt;/td&gt;
            &lt;td class="style6"&gt;
                &lt;asp:CheckBox ID="chkBoxPerson" runat="server" Font-Bold="True" Text="Person" 
                    CssClass="ChkBoxStyle" Font-Size="Small" /&gt;&amp;nbsp;&lt;/td&gt;
            &lt;td class="style7"&gt;
                &lt;asp:DropDownList ID="ddlPerson" runat="server" CssClass="ddl"&gt;
                &lt;/asp:DropDownList&gt;&amp;nbsp;&lt;/td&gt;
            &lt;td class="style13"&gt;
                &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td class="style4"&gt;
                &lt;asp:CheckBox ID="chkBoxProgrm" runat="server" Font-Bold="True" 
                    Text="Program" CssClass="ChkBoxStyle" Font-Size="Small"/&gt;&amp;nbsp;&lt;/td&gt;
            &lt;td class="style3"&gt;
                &lt;asp:DropDownList ID="ddlProgram" runat="server" CssClass="ddl"&gt;
                &lt;/asp:DropDownList&gt;&amp;nbsp;&lt;/td&gt;
            &lt;td class="style5"&gt;
                &lt;asp:CheckBox ID="chkBoxProvince" runat="server" Font-Bold="True" 
                    Text="Province" CssClass="ChkBoxStyle" Font-Size="Small"/&gt;&amp;nbsp;&lt;/td&gt;
            &lt;td class="style3"&gt;
                &lt;asp:DropDownList ID="ddlProvince" runat="server" CssClass="ddl"&gt;
                &lt;/asp:DropDownList&gt;&amp;nbsp;&lt;/td&gt;
            &lt;td class="style18"&gt;
                &lt;asp:CheckBox ID="chkContentTone" runat="server" Font-Bold="True" 
                    Text="Content Tone" CssClass="ChkBoxStyle" Font-Size="Small"/&gt;&amp;nbsp;&lt;/td&gt;
            &lt;td class="style9"&gt;
                &lt;asp:RadioButton ID="rdBtnPositive" runat="server" Text="Positive" CssClass="RadioGroup" /&gt;&amp;nbsp;&amp;nbsp;&lt;asp:RadioButton 
                    ID="rdBtnNegative" runat="server" Text="Negative" CssClass="RadioGroup" /&gt;&amp;nbsp;&amp;nbsp;&lt;asp:RadioButton ID="rdBtnNeutral"
                            runat="server" Text="Neutral" CssClass="RadioGroup" /&gt;&amp;nbsp;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td class="style14"&gt;
                &lt;asp:Label ID="Label4" runat="server" Text="Keyword" Font-Names="Verdana,Arial" 
                    Font-Bold="True" Font-Size="Small"&gt;&lt;/asp:Label&gt;&amp;nbsp;&lt;/td&gt;
            &lt;td class="style15"&gt;
                &lt;asp:TextBox ID="tbKeyword" runat="server" CssClass="tb"&gt;&lt;/asp:TextBox&gt;&amp;nbsp;&lt;/td&gt;
            &lt;td class="style14"&gt;
                &lt;asp:CheckBox ID="chkBoxCity" runat="server" Font-Bold="True" Text="City" 
                    CssClass="ChkBoxStyle" Font-Size="Small"/&gt;&amp;nbsp;&lt;/td&gt;
            &lt;td class="style15"&gt;
                &lt;asp:DropDownList ID="ddlCity" runat="server" CssClass="ddl"&gt;
                &lt;/asp:DropDownList&gt;&amp;nbsp;&lt;/td&gt;
            &lt;td class="style16"&gt;
                &lt;/td&gt;
            &lt;td class="style17"&gt;
                &lt;asp:Button ID="Button1" runat="server" Text="Search" CssClass="button" /&gt;
                &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;asp:Button ID="Button2"
                    runat="server" Text="Report" CssClass="button" /&gt;&lt;/td&gt;
        &lt;/tr&gt;       
    &lt;/table&gt;
</code></pre>

<p>which is shown like this.
<img src="http://i.stack.imgur.com/QFOeg.png" alt="enter image description here"></p>

<p>but I want to disable the all dropdownlist and radio-button on page load and when i checked on check-box then enable only related dropdownliast or group of checkd box. Like this.
<img src="http://i.stack.imgur.com/IT92v.png" alt="enter image description here">
and when I checked on check-box(content type), group of radio buttons becomes enable like this.
<img src="http://i.stack.imgur.com/5ntWW.png" alt="enter image description here">
I want when I checked on any check-box then related dropdownlist or group of radio buttons becomes enables.
All this I want on client side (server-side is bad practice which i already know) java script.
ANy Idea as I am searching from last 2 days and not found any result!</p>
