Try my app Expense Manager @ google play and amazon store.

Friday, April 19, 2013

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. -:)

No comments:

Post a Comment

Follow by Email

Google+ Badge