Text field make editable, not editable using jquery

Question

I am using display tag for creating tables and using jquery to make a textfield editable and remove readonly property.

<script type="text/javascript">
$(function(){
    $(".makeEditable").click(function(){
        $('input:text').removeAttr("readonly");    
    });
    $(".makeNonEditable").click(function(){
        $('input:text').attr("readonly", "readonly");    
    });               
})
</script>

Here is the code for table and column with textfield

<display:table name="loadData" style="float:left;">
    <display:column title="User Defined" class="colId">
    <input type="text" value= "" name="userdefined" size="10" readonly="readonly"/>
    </display:column>
</display:table>

I have created a button to make it editable...

<input type="button" value="Make Editable" class="makeEditable" />

I dont know why but its not working...no action happen

Answer 1

For html input text field:

<input id="name" type="text">

You can use readonly property-

$("#name").prop("readonly",true);

This will make text field uneditable.

To make it editable :

$("#name").prop("readonly",false);