Uncheck and Disable CheckBox Using JavaScript and ASP.NET CheckBox Controls

Register JavaScript onclick events to ASP.NET CheckBox controls:

protected override void OnLoad(EventArgs e)
    {
        base.OnLoad(e);

        // Add client-side onclick to handle disabling of child checkboxes
        cbAllCorporateNewsReleases.Attributes.Add("onclick", "DisableCheckbox('AllCorporateNewsReleases')");
        cbAllSECFilings.Attributes.Add("onclick", "DisableCheckbox('AllSECFilings')");

    }

JavaScript code:



    <script type="text/javascript" language="javascript">
        function DisableCheckbox(checkBoxItem) {

            switch (checkBoxItem) {
                case "AllCorporateNewsReleases":
                    // Disable and Uncheck Financial news releases only checkbox
                    document.getElementById("<%= cbFinancialNewsReleasesOnly.ClientID %>").disabled = document.getElementById("<%= cbAllCorporateNewsReleases.ClientID %>").checked;
                    document.getElementById("<%= cbFinancialNewsReleasesOnly.ClientID %>").checked = false;

                    // Disable and Uncheck Environmental news releases only checkbox
                    document.getElementById("<%= cbEnvironmentalNewsReleasesOnly.ClientID %>").disabled = document.getElementById("<%= cbAllCorporateNewsReleases.ClientID %>").checked;
                    document.getElementById("<%= cbEnvironmentalNewsReleasesOnly.ClientID %>").checked = false;

                    // Disable and Uncheck Operations news releases only checkbox
                    document.getElementById("<%= cbOperationsNewsReleasesOnly.ClientID %>").disabled = document.getElementById("<%= cbAllCorporateNewsReleases.ClientID %>").checked;
                    document.getElementById("<%= cbOperationsNewsReleasesOnly.ClientID %>").checked = false;

                    break;

                case "AllSECFilings":
                    // Disable and Uncheck Quarterly and Annual Reports checkbox
                    document.getElementById("<%= cbQuarterlyAndAnnualReports.ClientID %>").disabled = document.getElementById("<%= cbAllSECFilings.ClientID %>").checked;
                    document.getElementById("<%= cbQuarterlyAndAnnualReports.ClientID %>").checked = false;

                    // Disable and Uncheck Insider Transactions checkbox
                    document.getElementById("<%= cbInsiderTransactions.ClientID %>").disabled = document.getElementById("<%= cbAllSECFilings.ClientID %>").checked;
                    document.getElementById("<%= cbInsiderTransactions.ClientID %>").checked = false;


                    break;
            }


        }
    </script>


ASP.NET CheckBox controls:

  <div id="NewsReleases">
            <img class="sub" alt="News Releases" src="images/sub_NewsReleases.gif" />
            <table border="0">
                <tr>
                    <td>
                        <asp:CheckBox ID="cbAllCorporateNewsReleases" runat="server" Text="All corporate news releases" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:CheckBox ID="cbFinancialNewsReleasesOnly" runat="server" Text="Financial news releases only"
                            CssClass="indentCheckbox" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:CheckBox ID="cbEnvironmentalNewsReleasesOnly" runat="server" Text="Environmental news releases only"
                            CssClass="indentCheckbox" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:CheckBox ID="cbOperationsNewsReleasesOnly" runat="server" Text="Operations news releases only"
                            CssClass="indentCheckbox" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:CheckBox ID="cbAllRegionalUtilityNewsReleases" runat="server" Text="All regional utility news releases" />
                    </td>
                </tr>
            </table>
            
        </div>
        <div id="Events">
            <img class="sub" alt="Events" src="images/sub_Events.gif" />
            <table border="0">
                <tr>
                    <td>
                        <asp:CheckBox ID="cbInvestorPresentationUpdates" runat="server" Text="Investor presentation updates" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:CheckBox ID="cbInvestorCalendarUpdates" runat="server" Text="Investor calendar updates" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:CheckBox ID="cbFinancialWebcastAlerts" runat="server" Text="Financial webcast alerts" />
                    </td>
                </tr>
            </table>
        </div>
        <div id="SECAlerts">
            <img class="sub" alt="SEC Filings" src="images/sub_SECFilings.gif" />
            <table border="0">
                <tr>
                    <td>
                        <asp:CheckBox ID="cbAllSECFilings" runat="server" Text="All SEC Filings" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:CheckBox ID="cbQuarterlyAndAnnualReports" runat="server" Text="Quarterly and Annual Reports"
                            CssClass="indentCheckbox" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:CheckBox ID="cbInsiderTransactions" runat="server" Text="Insider Transactions"
                            CssClass="indentCheckbox" />
                    </td>
                </tr>
            </table>
        </div>
        <div id="StockAlerts">
            <img class="sub" alt="Stock Information" src="images/sub_StockInformation.gif" />
            <table border="0">
                <tr>
                    <td>
                        <asp:CheckBox ID="cbQuoteByEmail" runat="server" Text="Quote By Email" />
                    </td>
                </tr>
            </table>
        </div>

Advertisements

One thought on “Uncheck and Disable CheckBox Using JavaScript and ASP.NET CheckBox Controls

  1. I am battling around with ASP . NET and checkboxes.

    Looking into different examples and trying them all on my local machine.

    Looking at this example it looks as if your not doing lots of words, but instead bringing it totally down to the point. Great. Thanks… where can I buy a book from you 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s