ReadOnly attribute for HTML select elements

Question

Is there an attribute or method for HTML select boxes equivalent to readOnly="true" for HTML inputs?

I have a form selection field that I would like to disable, but still pass when the form is submitted. If it were HTML input, I would do something like this

 $('select_id').setAttribute('readOnly', 'true'); 

and the browser will display this field as not editable, but its value will be transferred to the backend. I would like something like this for selecting HTML, but doing the following

 $('#select_id').setAttribute('readOnly', 'true'); 

does not work. The attribute was successfully added to the DOM, but the browser still makes it available.

I understand that I could do the following

 $('#input_id').disabled(); 

but when the field is disabled, its value is not passed to the backend.

I would like to disable this selection box, but still go to the server.

(examples use Prototype JS, but I'm interested in any general solution)

Answer 1

Disable everything except the selected option:

 <select> <option disabled="disabled">1</option> <option selected="selected">2</option> <option disabled="disabled">3</option> </select> 

Thus, the dropdown menu still works (and sends its value), but the user cannot select another value.

Answer 2

add a disabled class:

 .disabled{ color: grey; } 

if using the class currently prevents focus and click defaults, and dbl:

 $('#el').bind('click dblclick focus').function(event){ if ($(this).hasClass('disabled')) event.preventDefault(); });