Readonly property not working

Question

"readonly" property not working. Please check my code below http://jsfiddle.net/KZArL/

Even after setting readonly still i can change value...I am using the below code

$('select').prop('readonly','readonly');

If i disable post won't carry disabled value...

Note that even for the HTML input field the name of the property is readOnly rather than readonly (which is the name of the attribute). — Neil, Aug 04 '12 at 00:00
Don't you want `disabled`? [Example](http://jsfiddle.net/KZArL/1/) — Jason Kaczmarsky, Jul 27 '11 at 15:31

score 7 · Answer 1 · answered Jul 27 '11 at 15:32

7

AFAIK, you cannot make a select read only, what you need to do is disable it:

$('select').prop('disabled', true);

Bare in mind that disabled form fields are not submitted with the form.

answered Jul 27 '11 at 15:32

Dunhamzzz

Though others mentioned disabled, +1 for mentioning it becomes invisible on form submission. – Brad Christie Jul 27 '11 at 15:33
1

you could do `$('select').closest('form').submit(function(){ $('select').prop('disabled', false);});` to enable it before submit and have more or less the same than readonly – Enki Jul 27 '11 at 15:45
@enki No point as even if it's disabled it can be changed with simple tools. – Dunhamzzz Jul 27 '11 at 15:51

score 3 · Answer 2 · edited May 23 '17 at 12:14

3

<select> doesn't have a readonly attribute, which is probably the issue you're seeing.

See the MDN on <select> for more details.

On another question though, I just made a very simple selection change prevention plugin for jQuery if you're interested.

edited May 23 '17 at 12:14

Community

answered Jul 27 '11 at 15:29

Brad Christie

1

@Enki: Indeed, but that makes it not show up on a form submission. Given it's a form element, I feel that wouldn't be desired. – Brad Christie Jul 27 '11 at 15:34
well using value of a readonly is not good I think ( since we think user can't change it but the user can ) but if it's needed the field could be enabled before submit ( or the value copied in an hidden field ) – Enki Jul 27 '11 at 15:42
@Enki: Or, `$('select>option:not([selected])').css('display','none');` – Brad Christie Jul 27 '11 at 15:53

score 0 · Answer 3 · answered Jul 27 '11 at 15:31

0

You should use disabled:

 $('select').prop('disabled', true);

answered Jul 27 '11 at 15:31

Nicola Peluchetti

score 0 · Answer 4 · edited Aug 06 '12 at 20:12

0

try this:

$('select').attr('readonly', true);

edited Aug 06 '12 at 20:12

Nikola K.

answered Jul 27 '11 at 15:35

Vinay

1

Anywhere from 4-7 minutes after it's been determined there is no readonly attribute you come up with this solution. Interesting. – Brad Christie Jul 27 '11 at 15:39

4 Answers4