jQuery readonly attribute problems

Question

I have this

<input type="text" id="tbox" name="tbox" readonly="readonly" />

I have a button on which I do this

$('#tbox').removeAttr('readonly');

I've also tried doing this

$('#tbox').attr('readonly', false);

.. but none work..

Answer 1

You will need to do this when the DOM has loaded using jQuery's ready event for the document object. Here's a Working Demo

$(document).ready(function() {

    $('#tbox').removeAttr('readonly');

});

or the shorthand

$(function() {

    $('#tbox').removeAttr('readonly');

});

EDIT:

I just read on one of your other questions how $() was not working but when you used jQuery(), your code worked. That indicates that there is a conflict with the $ function, most likely due to another JavaScript framework being used on the page too that also uses the $ shorthand. You can

1- use jQuery's noConflict() to get around this. You can assign the jQuery selector function to a different alias.

2- usejQuery() in your code in place of $()

3- wrap your jQuery code in a self-invoking anonymous function that will still allow you to use the $() shorthand for the jQuery selector inside of it

(function($) {

    $(function() {

        $('#tbox').removeAttr('readonly');

    });

})(jQuery);

This is an anonymous function that takes one parameter, $ and is executed immediately, passing in jQuery as the argument for that parameter.

Answer 2

http://jetlogs.org/2007/12/16/jquery-disabled-and-readonly-inputs/

The difference here is that they do

<input type="text" id="tbox" name="tbox" readonly />

And then

$('#tbox').removeAttr('readonly');

should work.