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

Your code seems to be alright. Some other code will be generating the error. Try to debug using firebug. — rahul, Sep 14 '09 at 09:08
Use Prop() instead of attr(). See this article, http://stackoverflow.com/questions/5874652/prop-vs-attr. Also, if you are in IE, check the compatibility mode (Tools > "Compatibility View") make sure Compatibility View is not checked. — spoony, Jun 06 '13 at 18:41

score 14 · Answer 1 · edited May 23 '17 at 11:53

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.

@mathius1 Looks like the example was a victim of a vulnerability in JSBin. I've updated it to point to the correct original example. Thanks for the spot — Russ Cam, Mar 06 '14 at 18:08

score 2 · Answer 2 · edited Jan 30 '15 at 09:06

2

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.

edited Jan 30 '15 at 09:06

BomberMan

1,094
3
13
33

answered Sep 14 '09 at 09:13

Natrium

30,772
17
59
73

score 2 · Answer 3 · answered Dec 09 '10 at 13:46

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`

answered Dec 09 '10 at 13:46

JohnC

21
1

Thanks.. that worked for me. I don't know why but simply using attr("readonly") wouldn't do the trick. – Simon Dufour Jul 26 '11 at 14:31

score 0 · Answer 4 · edited Jun 12 '13 at 11:53

0

    <input type="submit"  id="btn1" onclick="setTimeout(disablefunction, 1);">

    add function of java script
        <script type="text/javascript" >


        function disablefunction() 
        {
            $('#btn1').attr('disabled',true)
        }


        </script>

I am sure this will work 100%

edited Jun 12 '13 at 11:53

Franz Kafka

10,623
20
93
149

answered Jun 12 '13 at 11:35

Shivam Srivastava

4,496
2
23
24

jQuery readonly attribute problems

4 Answers4