How to set readonly property of dynamic textbox using jQuery?

I'm trying to fill a textbox from DB values and I want to set textbox value readonly. When the user clicks on an EDIT option then set all textboxes become editable. I have failed to achieve this. Here is my HTML code:

<html>
  <head> 
    <script>
      $(document).ready(function() {  
        $('contentid :input').each(function() {
          $(this).attr("disabled",true);
        });

      $('edit').on('click',function() {
        $('contentid :input').each(function() {
          $(this).attr('disabled',false);});
        });
     });
   </script>
</head>

<body>
  <div data-role="page" id="viewInformation" data-theme="d" data-add-back-btn="true" data-back-btn-text = "back">
    <div data-role="header" id="headerid" class="ui-bar ui-bar-b">
      <h3></h3> 
    </div>

    <div data-role="content" id="contentid">
      <a href="" id="saveDBValue" data-role="button" data-mini="true" style="width:60px; height:40px; float:center;">SAVE</a>
      <a href="" id="edit" data-role="button">EDIT</a>
    </div>
  </div>
</body>

Here is my JavaScript code:

 function getDataofSelectedListItem()
    {
        alert("getDataofSelectedListI");
        clickedListItem = window.localStorage.getItem("clickedValueofList");
        console.log("clicked list item"+clickedListItem);
        //db = window.openDatabase("loginintro", "1.0", "loginintro", 1000000);
        var sqlQuery = 'SELECT * FROM loginTable WHERE username=\''+window.localStorage.getItem("clickedValueofList").trim()+'\';';

        console.log("selected list query:"+sqlQuery);
        db.transaction(function(tx)
        {
          tx.executeSql(sqlQuery,[],successCBofListItem,errorCBofListItem);
        },errorCB,successCB);
    }
    function successCBofListItem(tx,results)
    {   alert("erer");
      if(results != null && results.rows != null && results.rows.length > 0) 
         {  $('contentid').append('<label>UserName:</label><input content-editable="false" id="name" type="text"   value="'+results.rows.item(0).username+'"/>');
         $('contentid').append('<label>EMAIL ID:</label><input type="text" value="'+results.rows.item(0).emailid+'"/>');
         $('contentid').append('<label>Password:</label><input type="text" value="'+results.rows.item(0).password+'"/>');
    }   
    function errorCBofListItem()
    {
        alert("errorCBofListItem");
    }

What am I doing wrong?


ANSWERS:


You have to use live for capturing the click event

$('edit').live('click',function()

I have created an Example

Example for dynamic textboxes


I believe what you're looking for is something like this:

$('input').prop('readonly',true);

It has been answered Here


Your code to disable all input fields is executed at DOMReady, which is before your successCBofListItem is executed, i.e. before there are any inputs to disable. You need to make sure it is executed after.

As of jQuery 1.6, use .prop('disabled', true) rather than .attr('disabled', true). Furthermore, you need not iterate over the selection and disable each input idividually, you can set the property for the entire collection:

$('contentid :input').prop('disabled', true)

If what you've pasted above is your code exactly as it exists in your application, then you need to wrap your javascript in head in <script>...</script> tags.

A complete solution might look something like this:

function toggleForm(disabled) {
    $('contentid :input').prop('disabled', disabled);
}

$(function() {
    $('edit').on('click', function() { toggleForm(false); });
});

...

function successCBofListItem(tx,results)
{
     if(results != null && results.rows != null && results.rows.length > 0) 
     {
         $('contentid').append('<label>UserName:</label><input content-editable="false" id="name" type="text"   value="'+results.rows.item(0).username+'"/>');
         $('contentid').append('<label>EMAIL ID:</label><input type="text" value="'+results.rows.item(0).emailid+'"/>');
         $('contentid').append('<label>Password:</label><input type="text" value="'+results.rows.item(0).password+'"/>');

         toggleForm(true);
     }
}   

In your successCBofListItem above you also seem to be missing a }, which I've corrected above. I've left the content-editable attribute in your code above, in case you're using it for something elsewhere in your code, but it is not required for this purpose. contenteditable is for editing content that is not a form element.



 MORE:


 ? Textbox becomes readonly on postback even when setting the readonly attribute to false manually
 ? How to remove multiple dynamically generated elements at the same time by their class name?
 ? set readonly property to false for an html text input on clicking on Edit
 ? How to keep readonly="false" for input boxes with same class when moving focus between them?
 ? Does std::vector behave different for clearing or deleting PODs
 ? Does std::vector behave different for clearing or deleting PODs
 ? Does std::vector behave different for clearing or deleting PODs
 ? Why is there not an std::is_struct type trait?
 ? Is std::vector::size() allowed to require non-trivial computations? When would it make sense?
 ? state of std::vector after std::bad_alloc