Friday, August 10, 2012

Asp.Net jQuery Textbox set ReadOnly

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

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

$('#txtReadOnly').attr("readonly", "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 Set Radio Button to set the ReadOnly Property


<html xmlns="http://www.w3.org/1999/xhtml">
<
head runat="server">
    <title>TextBox</title>
    <link type="text/css"
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 Set - ReadOnly Property
            $('#radReadOnly_0').click(function() {
                if ($('#radReadOnly_0:checked').is(':checked')) {
                    $('#txtReadOnly').val('');
                    $('#txtReadOnly').attr("readonly", "readonly");
                }
             });
        });
    </script>
</head>
<body>
    <form id="frmTextBox" runat="server">
    <div id="pageControls">
        <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>

Run the application, click on the Set Radio Button, notice that the text is set to Read-only and doesn’t allow the user to enter any values.



Search Flipkart Products:
Flipkart.com

No comments: