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> </td>
</tr>
<tr>
<td>Try to type:</td>
<td>
<asp:TextBox ID="txtTestbox" runat="server" ClientIDMode="Static" />
</td>
</tr>
<tr>
<td> </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
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!
