How to Enable and Disable ASP.NET TextBox Control on CheckBox Click in Java Script

• Create New Project in Visual Studio 2010 (or in any version).
• Add New Page ( named default.aspx ).
• Add Following aspx Code in default.aspx page.

        <table style="width: 100%;">

            <tr>

                <td align="right" style="width: 50%">

                    <asp:Label ID="LabelClick" runat="server" Text="Click Me !!!"></asp:Label>

                </td>

                <td align="left" style="width: 50%;">

                    <asp:CheckBox ID="CheckBox" onclick="EnableDisableTextBox();" Checked="false" runat="server" />

                </td>

            </tr>

            <tr>

                <td align="right" style="width: 50%">

                    <asp:Label ID="LabelName" runat="server" Text="Name:"></asp:Label>

                </td>

                <td align="left" style="width: 50%">

                    <asp:TextBox ID="TextBoxName" runat="server" Width="70%"></asp:TextBox>

                </td>

            </tr>

            <tr>

                <td align="right" style="width: 50%">

                    <asp:Label ID="LabelAge" runat="server" Text="Age:"></asp:Label>

                </td>

                <td align="left" style="width: 50%">

                    <asp:TextBox ID="TextBoxAge" runat="server" Width="70%"></asp:TextBox>

                </td>

            </tr>

        </table>

• Add Following Java Script Code inside head tag in default.aspx page.

    <script type="text/javascript" language="javascript">

        function EnableDisableTextBox() {

            var CallerCheckBoxID = "<%= CheckBox.ClientID %>";

            var LblName = "<%= LabelName.ClientID %>";

            var TxtName = "<%= TextBoxName.ClientID %>";

            var LblAge = "<%= LabelAge.ClientID %>";

            var TxtAge = "<%= TextBoxAge.ClientID %>";

            if (document.getElementById(CallerCheckBoxID).checked == true) {

                document.getElementById(LblName).disabled = true;

                document.getElementById(TxtName).disabled = true;

                document.getElementById(LblAge).disabled = true;

                document.getElementById(TxtAge).disabled = true;

            }

            else {

                document.getElementById(LblName).disabled = false;

                document.getElementById(TxtName).disabled = false;

                document.getElementById(LblAge).disabled = false;

                document.getElementById(TxtAge).disabled = false;

            }

        }

    </script>

You have all done. View it in browser.
Follow me on Facebook to get more cool tutorials. -:)

See Also