2

Possible Duplicate:
add “readonly” to <input > (jQuery)

This is so weird, I hope there is a simple explanation. I am working with Rails, but I don't think that matters.

I add the readonly attribute to my project html element directly, I load the page and the input field behaves as readonly, like it should. After the page loads, the element looks like this:

<input class="span6" id="event_title" name="event[title]" readonly="readonly" size="30" type="text" value="test">

But I really want to add it through jquery. When I do that with:

$('#event_title').attr(readyonly", "readonly")

After the page loads, the element looks like this:

<input class="span6" id="event_title" name="event[title]" size="30" type="text" value="test" readyonly="readonly">

But the field is still editable and has no sign of being read only! Please help....

Community
  • 1
  • 1
kdavh
  • 404
  • 6
  • 13

7 Answers7

5

This:

$('#event_title').attr(readyonly", "readonly")

Should be:

$('#event_title').prop('readonly', true);

readyonly is a misspelling and .prop is best practice with attributes like readonly, selected, and checked. This post helps explain the difference: .prop() vs .attr()

Community
  • 1
  • 1
iambriansreed
  • 21,935
  • 6
  • 63
  • 79
3

You've misspelled "readonly" in $('#event_title').attr(readyonly", "readonly") - you got "readyonly" as 1st param :-)

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Maddog
  • 4,746
  • 4
  • 14
  • 11
3

Try:

$('#event_title').attr('readonly', true);

iambriansreed
  • 21,935
  • 6
  • 63
  • 79
Ravi Kumar
  • 226
  • 2
  • 10
2

You have typing error:

$('#event_title').attr(readyonly", "readonly")

Change it to:

$('#event_title').attr("readonly", "readonly")
Develoger
  • 3,950
  • 2
  • 24
  • 38
1

Try using 'prop' rather than 'attr'

graphicdivine
  • 10,937
  • 7
  • 33
  • 59
0

I have encountered similar issues. I assume that the typo in your post is just that as loaded page example correctly reflects the property.

May I suggest that the question you need to be asking yourself is what is the difference between an attribute and a property. i.e. when should you be using .attr and .prop.

You will find that there is a lot of information posted regarding the release of jQuery 1.6 and 1.6.1 when .prop was introduced.

As far as I understand it the every DOM element as with any object has both attributes and properties. The old .attr apparently did not separate these the current .attr and .prop does.

In my case, as I think is true for your case, this had particular significance when boolean attributes are encountered - so checked, selected, disabled, readonly are boolean attributes i.e. can be true or false. Where these exist property is particularly important as I found to my cost!

Because boolean attributes can be said to be true even if the attribute exists with a null value.

So readonly can be set true with

<input readonly> or <input readonly=""> or <input readonly="readonly">

So in jquery using .attr to control read only can lead to unexpected results therefore to toggle readonly on and off use 

$('#event_title').prop("readyonly", true);
$('#event_title').prop("readyonly", false);

Beware you might be tempted to say

$('#event_title').removeProp("readyonly");

to toggle off. But this would be wrong because you cannot toggle back if applied to a native property such as selected or checked or disabled (until the page is refreshed). So only use the remove if you really want to remove it.

codepuppy
  • 1,130
  • 2
  • 15
  • 25
-1

That should work:

   $('#event_title').attr("readyonly", "readonly");

Also keep an eye on Console, is there any JS Error ?

Riz
  • 9,703
  • 8
  • 38
  • 54