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 t

Solution 1:

You have to use live for capturing the click event

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

I have created an Example

Example for dynamic textboxes

Solution 2:

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

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

It has been answered Here

Solution 3:

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:

functiontoggleForm(disabled) {
    $('#contentid :input').prop('disabled', disabled);
}

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

...

functionsuccessCBofListItem(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.