In this article I will explain how to enable or disable TextBox controls in web applications using jQuery.

First we download the file:

  1. jquery.min.js

These files are added to the project, then use the following procedure.

Program

Enable_Disable_Control.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Enable & Disable textbox Controls</title>

<script src="jquery.min.js" type="text/javascript">

</script>

<script type="text/javascript">

$(document).ready(function () {

$("#btnEnable").toggle(function () {

$('input[type="text"]').removeAttr('disabled');

}, function () {

$('input[type="text"]').removeAttr('disabled');

});

});

$(document).ready(function () {

$("#btnDisable").toggle(function () {

$('input[type="text"]').attr("disabled", "disabled");

}, function () {

$('input[type="text"]').attr("disabled", "");

});

});

</script>

</head>

<body>

<h3 style="color: #0033CC"> Enable And Disable Textbox Control in Jquery</h3>

<form id="form1" runat="server">

<table>

<tr>

<td><b>First name:</b></td>

<td><input id="Fname" type="text" /></td>

</tr>

<tr>

<td><b>Last name:</b></td>

<td>

<input id="Lname" type="text" /></td>

</tr>

<tr>

<td><b>Contact No: </b></td>

<td><input id="contactNo" type="text" /></td>

</tr>

<tr>

<td><b>Location: </b></td>

<td><input id="loation" type="text" /></td>

</tr>

<tr>

<td></td>

<td>

<input id="btnEnable" type="button" value="Enable" style="font-weight: bold" />

<input id="btnDisable" type="button" value="Disable"

style="font-weight: bold" /></td>

</tr>

</table>

</form>

</body>

</html>

Output 1

Enter values into the TextBox:

First-image.jpg


Output 2

If we click on the Disable button then all the TextBox controls are disabled. We can't enter any values into the TextBoxes.

click-on-disable.jpg


Output 3

If we click on Enable button then all the TextBox controls are enabled and we can enter any value into the TextBoxes.

click-on-enable.jpg


For more information, download the attached sample application.