Question

i’m trying to add readonly to all the inputs and then on the click remove the readonly to make it works for typing.
the readonly set for all inputs part works but the remove on click doesn’t work please help.

my code :

<script language="javascript">
$(document).ready(function()
{
$('#secureFields :input').attr('readonly', true);

    $('.readonly').click(
    function()
    {
        if ($('.readonly').attr("readonly") == true)
        {
            $('.readonly').val('');
            $('.readonly').removeAttr("readonly");
        }           
    }); 
});
</script>

html is like this :

 <table class='table' id='secureFields'  >
        <tr>
            <td width=200>First Name:</td>
            <td><input readonly='readonly'  type='text'  name='firstname' size=30 class='required'/></td>
        </tr>
        <tr>

Answer 1

important note: don’t write language="javascript" but type="text/javascript"

You have to select the inputs with attribute readonly, not class readonly.

So do the following:

$('input[readonly]').click(

instead of

$('.readonly').click(

and then you just need one line:

$(this).removeProp("readonly");

This is the correct code:

$('input[readonly]').click(function(){
     $(this).removeProp("readonly");           
});

Check out the Examplefiddle

FYI: Script are not stopped by your readonly, they can simply set the value of the field…