C# Guide - C#, Asp.Net, MVC, LINQ, jQuery and SharePoint Resources

Friday, August 10, 2012

Asp.Net jQuery Textbox Enable

The jQuery library provides various options to work with Textboxes, in this post Asp.Net jQuery Textbox Enable, we shall see on how to enable an Asp.net Textbox control which was previously disabled.

We can disable a Textboxes using jQuery as follows.

$('#txtEnableDisable').prop("disabled", false);

Example
Create a new HTML/ASPX page
Copy the below code.
Change the mapping of the jQuery file jquery-1.7.2.js to map to your local drive.
Run the application, Click on the Enable Radio Button to remove the disable Property

<title>TextBox</title>

href="Stylesheet.css"

rel="Stylesheet" />

<script

type="text/javascript"

src="JavaScript/jquery-1.7.2.js"></script>

<script

type="text/javascript"

language="javascript">

$(document).ready(function() {

// TextBox Enable

$('#radEnableDisable_0').click(function() {

if ($('#radEnableDisable_0:checked').is(':checked')) {

$('#txtEnableDisable').val('');

$('#txtEnableDisable').prop("disabled", false);

$('#txtEnableDisable').focus();

}

});

</script>

</head>

<body>

<table>

<tr>

<td>Textbox (Enable/Disable)</td>

<td>

<asp:TextBox id="txtEnableDisable"
runat="server"></asp:TextBox>

                    <asp:RadioButtonList
                                 ID="radEnableDisable"
                                 runat="server"
                                 RepeatDirection="Horizontal">

                        <asp:ListItem
                                 Value="Enable"
                                 Text="Enable"></asp:ListItem>

                        <asp:ListItem
                                 Value="Disable"
                                 Text="Disable"></asp:ListItem>

</asp:RadioButtonList>

</td>

</tr>

</table>

</div>

</form>

</body>

</html>

Related Posts
Asp.Net jQuery get Textbox Values
Asp.Net jQuery set Textbox Values
Asp.Net jQuery get Textbox Attributes
Asp.Net jQuery set Textbox Attributes
Asp.Net jQuery Apply style to all TextBoxes in the Page
Asp.Net jQuery Apply cssClass to all TextBoxes in the Page
Asp.Net jQuery change textbox style on focus
Asp.Net jQuery loop through Textboxes
Asp.Net jQuery Textbox set ReadOnly
Asp.Net jQuery Textbox Remove ReadOnly
Asp.Net jQuery Textbox Disable
Asp.Net jQuery Textbox Enable

Asp.Net jQuery Textbox Remove ReadOnly

The jQuery library provides various options to work with Textboxes, in this post Asp.Net jQuery Textbox remove ReadOnly, we shall see on how to remove the ReadOnly property to the Asp.net Textbox control.

We can remove the ReadOnly property to a Textboxes using jQuery as follows.

$('#txtReadOnly').removeAttr("readonly");

Example
Create a new HTML/ASPX page
Copy the below code.
Change the mapping of the jQuery file jquery-1.7.2.js to map to your local drive.
Run the application, Click on the Remove Radio Button to remove the ReadOnly Property

<title>TextBox</title>

href="Stylesheet.css"

rel="Stylesheet" />

<script

type="text/javascript"

src="JavaScript/jquery-1.7.2.js"></script>

<script

type="text/javascript"

language="javascript">

$(document).ready(function() {

// TextBox Remove - ReadOnly Property

$('#radReadOnly_1').click(function() {

if ($('#radReadOnly_1:checked').is(':checked')) {

$('#txtReadOnly').removeAttr("readonly");

$('#txtReadOnly').focus();

}

});

</script>

</head>

<body>

<table>

<tr>

<td>Textbox (Read Only)</td>

<td>

<asp:TextBox id="txtReadOnly"
runat="server"></asp:TextBox>

                    <asp:RadioButtonList
                                 ID="radReadOnly"
                                 runat="server"
                                 RepeatDirection="Horizontal">

                        <asp:ListItem
                                 Value="Set"
                                 Text="Set"></asp:ListItem>

                        <asp:ListItem
                                 Value="Remove"
                                 Text="Remove"></asp:ListItem>

</asp:RadioButtonList>

</td>

</tr>

</table>

</div>

</form>

</body>

</html>