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

I know this is now Dec 2010, but I just read this post when searching on using JQuery to set and remove READONLY on a form's text box. I found and use this:

`$('#id-name').attr('readonly', true); // makes it readonly

$('#id-name').attr('readonly', false); // makes it editable`

Answer 3

read article on jetlogs

The difference here is that they do

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

And then

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

should work.