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:
$(“#btnDisable”).click(function () {
$(“input:text”).attr(“disabled”, “disabled”);
return false; //to prevent from postback
});
$(“input:text”).attr(“disabled”, “disabled”);
return false; //to prevent from postback
});
To enable asp.net textbox, use the following script:
$(“#btnEnable”).click(function () {
$(“input:text”).removeAttr(“disabled”);
return false; //to prevent from postback
});
$(“input:text”).removeAttr(“disabled”);
return false; //to prevent from postback
});
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=”http://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>
<head>
<title>Enable or Disable Asp.net TextBox on Button Click Event in jQuery</title>
<script type=”text/javascript” src=”http://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
[wpdm_file id=20]
