Hacer un select readonly con jQuery

Para un select no es aplicable la opción readonly, o está deshabilitado o está activo, pero no puede estar activo y ser readonly. Esto es lo que HTML y los navegadores te dicen pero hay una opción a esto y es deshabilitar todos los option no seleccionados con jQuery, de esta manera con este sencillo código JavaScript podemos simular tener un select readonly.

$('#selectid option:not(:selected)').attr('disabled',true);

Para los que quieran un poco más de teoría pueden seguir leyendo el post.

Diferencias entre controles readonly y disabled

La principal diferencia entre readonly y disabled es que aunque en ambos casos el contenido del control sobre el que se aplica no puede ser modificado en caso de readonly este valor si se envía al hacer el submit del formulario mientras en el caso de un control disabled este valor nunca se envía, con lo cual suele ser interesante tener un control no modificable pero que queramos tener su valor al recibir los datos del formulario.

Otra diferencia es que el atributo disabled se puede aplicar a cualquier control en un formulario mientras el readonly es solo para los input y los textarea, por eso es este truco para hacer los select readonly.

También hay diferencias en cuanto a la tabulación y el foco, por ejemplo no se puede dirigir el foco hacia controles deshabilitados y en el orden de tabulación se salta por encima de estos controles, mientras que el foco puede dirigirse hacia elementos de sólo lectura (aunque éstos no puedan ser modificados por el usuario) y estos elementos de sólo lectura si están incluidos en la navegación con tabulador.