jQuery set then read readonly attr on textbox

Question

​<input id="test" type="text" value="text" />​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

alert(​$(':input:not([readonly])').length);​​​​​​​​​​​​​​​​​ // 1

$('#test').attr('readonly', 'readonly');

alert($(':input:not([readonly])').length); // 1

$('#test').removeAttr('readonly');​​​​​​​​​​

alert($(':input:not([readonly])').length); // 1

Further to the question here, I can't get the solution to work because it seems jQuery doesn't set the readonly attribute correctly (or at least consistently).

Note I get the same results with $('#test').attr('readonly', true);

I'm using Chrome, and the readonly attribute renders as readonly="". There is another post on here which suggests FireFox does the same.

I'm not much bothered about this in as much as it still stops the text box from being editable, but I can't then find a way to detect the readonly attribute.

I normally love jQuery but this is all a bit WTF.

Any ideas?

Answer 1

I personally wouldn't use removeAttr()...I'd just set it to false with attr().

You could then just query the property normally:

if ($("#X").attr("readonly"))
{
    execute code
}

Also, you can keep using removeAttr(), and then just use the length as a way to detect the property:

if (!$("#X").attr("readonly").length)
{
    execute code
}

If you're worried about the selector, you should do the selector syntax as :not([readonly='readonly']) edit: I see that was already in the answer you cited.

Answer 2

@Trafalmadorian - Note that .length isn't valid as the result doesn't return an array. You can do without the .length