Home Asp.net Enable or Disable Asp.net TextBox on Button Click Event in jQuery

Enable or Disable Asp.net TextBox on Button Click Event in jQuery

102
0
Enable or Disable Asp.net TextBox on Button Click Event in jQuery
Enable or Disable Asp.net TextBox on Button Click Event in jQuery

In this tutorial, I’ll explain to you how to enable or disable asp.net textbox or HTML input control on the button click event in jquery with example.

Oh, by the way, just for refreshing, in my previous tutorials I had explained most popular jQuery fading effects, gridview inline insert update delete, jQuery fade-in and fade-out effects using css3 transition.  Also, you can find tutorials on Gridivew, Asp.net, and jQuery

To disable asp.net textbox, use the following script:

<script type="text/javascript">
    $("#btnDisable").click(function () {
        $("input:text").attr("disabled", "disabled");
        return false; //to prevent from postback
    });
</script>

To enable asp.net textbox, use the following script:

<script type="text/javascript">
    $("#btnEnable").click(function () {
        $("input:text").removeAttr("disabled");
        return false; //to prevent from postback
    });
</script>

As you can see in above example, we’re adding or removing disabled attribute using attr() or removeAttr() method in jQuery.

Enable or Disable Asp.net TextBox on Button Click Event in jQuery

Following is the complete HTML Markup code that I used for demonstration to enable or disable asp.net textbox on button click event in jquery:

<html>
<head>
    <title>Enable or Disable Asp.net TextBox on Button Click Event in jQuery</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btnDisable").click(function () {
                $("input:text").attr("disabled", "disabled");
                return false; //to prevent from postback
            });

            $("#btnEnable").click(function () {
                $("input:text").removeAttr("disabled");
                return false; //to prevent from postback
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <br />
    <br />
    <table>
        <tr>
            <td colspan="2">
                <b>* Click on any button and try to type text in textbox for demo</b>
            </td>
        </tr>
        <tr>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>Try to type:</td>
            <td>
                <asp:TextBox ID="txtTestbox" runat="server" ClientIDMode="Static" />
            </td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>
                <asp:Button ID="btnDisable" runat="server" Text="Disable" />
                <asp:Button ID="btnEnable" runat="server" Text="Enable" />
            </td>
        </tr>
    </table>
    </form>
</body>
</html>

Example Result

Enable or Disable Asp.net TextBox on Button Click Event in jQuery
Enable or Disable Asp.net TextBox on Button Click Event in jQuery

Download Example Code

Git Repo

That’s it, by using this way you can enable or disable asp.net textbox on button click event in jQuery using Asp.net web page.

Let me know if you’ve any questions or doubts about this tutorial by writing down your queries in comment below. I would be happy to provide you my feedback as soon as possible.

Happy coding!

Previous articlejQuery fading Effects – fadeIn fadeOut fadeTo fadeToggle to DIV text
Next articleChange Textbox Background Color on Focus or Blur in Asp.net
Hi there, I am Mayank, the man behind Technical Mack. I started AspnetO with a motive to educate people on various programming languages ranging from beginners to expert level. Through this blog, I aim to provide more insightful content.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

10 + nineteen =