title: How to set readonly property of dynamic textbox using jQuery?
body: <p>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:</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt; 
      &lt;script&gt;
        $(document).ready(function() {  
          $('#contentid :input').each(function() {
            $(this).attr("disabled",true);
          });
  
        $('#edit').on('click',function() {
          $('#contentid :input').each(function() {
            $(this).attr('disabled',false);});
          });
       });
     &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div data-role="page" id="viewInformation" data-theme="d" data-add-back-btn="true" data-back-btn-text = "back"&gt;
      &lt;div data-role="header" id="headerid" class="ui-bar ui-bar-b"&gt;
        &lt;h3&gt;&lt;/h3&gt; 
      &lt;/div&gt;
  
      &lt;div data-role="content" id="contentid"&gt;
        &lt;a href="#" id="saveDBValue" data-role="button" data-mini="true" style="width:60px; height:40px; float:center;"&gt;SAVE&lt;/a&gt;
        &lt;a href="#" id="edit" data-role="button"&gt;EDIT&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Here is my JavaScript code:</p>
  
  <pre><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 &amp;&amp; results.rows != null &amp;&amp; results.rows.length &gt; 0) 
           {  $('#contentid').append('&lt;label&gt;UserName:&lt;/label&gt;&lt;input content-editable="false" id="name" type="text"   value="'+results.rows.item(0).username+'"/&gt;');
           $('#contentid').append('&lt;label&gt;EMAIL ID:&lt;/label&gt;&lt;input type="text" value="'+results.rows.item(0).emailid+'"/&gt;');
           $('#contentid').append('&lt;label&gt;Password:&lt;/label&gt;&lt;input type="text" value="'+results.rows.item(0).password+'"/&gt;');
      }   
      function errorCBofListItem()
      {
          alert("errorCBofListItem");
      }
  </code></pre>
  
  <p>What am I doing wrong?</p>