Set a TextBox ReadOnly at runtime using jQuery ASP.NET using VB.NET

Here is a simple and easy article, which explore the way to set a textbox readonly at runtime using jQuery.
  • 3419
 

Here is a simple and easy article, which explore the way to set a textbox readonly at runtime using jQuery. It is a very common need that faced by most of the developers. Now let us quickly see the solution to make a textbox read-only.

The following function filters the textbox3 and textbox4 which contain values in it and applies the 'readonly' attribute to them.


$('input:text[value!=]').each(function() {
     $(this).attr('readonly', true);
});

When user run the program, user will be able to enter text in the first and second textboxes, but not in the third and fourth, because they are set to be read-only.


Code Snippets

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
 <title>jQuery ReadOnly Textboxes</title>
   <script type="text/javascript" src="jquery.js">
   </script>      
     <script type="text/javascript">
       $(function () {
         $('input:text[value!=]').each(function () {
            $(this).attr('readonly', true);
         });
       });
     </script>
 <style type="text/css">
   .style1
   {
      font-family: Verdana;
      font-size: small;
      font-weight: bold;
   }
   #tb2
   {
      height: 24px;
      width: 181px;
   }
   #tb3
   {
      height: 24px;
   }
  .style2
   {
      color: #FF0000;
   }
   .style3
   {
      color: #000099;
   }
 </style>
</head>
<
body style="width: 422px">
  <form id="form1" runat="server">
    <div class="bigDiv">
        <h2 class="style3" style="border: thin ridge #000000; font-family: Verdana;
         font-size
: small; font-weight: bold; height: 28px; background-color: #E6E6E6;">
          
Make TextBoxes ReadOnly at RunTime</h2>
        <p style="font-family: Verdana; font-size: small; font-weight: bold; background-color: #EAEAEA;">
             User Name&nbsp;
            <input id="tb1" runat="server" text="ReadOnlyText" 
                style="font-family: Verdana; font-size: small; width: 199px;"/><br /></p>
        <p style="background-color: #EAEAEA">
            <span class="style1">Password</span>&nbsp;
            <input id="tb2" runat="server" text="" 
                style="font-weight: bold; font-size: large;"/><br /></p>
        <p style="font-family: Verdana; font-size: small; background-color: #EAEAEA;">
            <span class="style1">Country</span>&nbsp;
            <input id="tb3" runat="server" text="" 
                style="font-family: Verdana; font-size: small; width: 97px;" value="India"/>&nbsp;
            <span class="style2" style="font-size: x-small">*Read Only Text</span><br /></p>
        <p style="font-family: Verdana; font-size: small; background-color: #EAEAEA;">
            &nbsp;<b>Age Above&nbsp; </b>
            <input id="tb4" runat="server" text="ReadOnlyText" 
                style="font-family: Verdana; font-size: small; width: 51px;" value="18" />&nbsp;
            <span class="style2" style="font-size: x-small">*Read Only Text</span></p>
        <p style="font-family: Verdana; font-size: small"><input id="Button1" 
                style="font-family: Verdana; font-size: small; font-weight: bold; color: #000099; background-color: #E6E6E6;" 
                type="button" value="Submit" /></p>
    </div>
  </form>
</body>
</
html>

Output
ReadOnly1.gif

The given form is only valid for Indian users with age of above 18 yrs. Now enter user name and password respectively in the first and second textbox and try to edit the third and fourth one.

ReadOnly2.gif

Thats all about I am trying to explain.

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.