Restringir la selección de la opción SELECCIONAR sin deshabilitar el campo

Question

Tengo un campo SELECT de selección múltiple cuyo valor no quiero que el usuario final pueda cambiar.

Por motivos de interfaz de usuario, me gustaría poder hacer esto sin utilizar el atributo deshabilitado="true".Intenté usar onmousedown, onfocus, onclick y configurar cada uno para que se desenfoque o devuelva falso, pero sin éxito.

¿Se puede hacer esto o estoy intentando hacer lo imposible?

Answer 1

Sé que mencionaste que no quieres, pero en realidad creo que usar el disabled El atributo es una mejor solución:

<select multiple="multiple">
    <option value="volvo" selected="true" disabled="disabled">Volvo</option>
    <option value="saab" disabled="disabled">Saab</option>
    <option value="opel" disabled="disabled">Opel</option>
    <option value="audi" disabled="disabled">Audi</option>
</select>

Si es necesario, siempre puedes dar la select a class y darle estilo con CSS.Esta solución funcionará en todos los navegadores independientemente de las capacidades de secuencias de comandos.

Answer 2

¿Podrías hacerlo con un onchange ¿evento?

<select onfocus="this.oldIndex=this.selectedIndex" onchange="this.selectedIndex=this.oldIndex">

Answer 3

Su mejor opción sería intercambiar las opciones dentro del cuadro de selección.Si solo tiene una respuesta en ese cuadro, no importa si se puede hacer clic en ella.

Sin embargo, intentaría encontrar otra forma de hacer esto, ya que parece que causaría frustración al usuario.Imagine este escenario de usuario:

1. "Mira, un cuadro de selección de opciones".
2. hacer clic
3. "Hrm, ¿por qué no funcionó?"
4. hacer clic
5. hacer clic!
6. "Esta cosa estúpida está rota, nunca volveré aquí".

Si cambia la selección por texto HTML, logra el mismo objetivo.Esta es una tarea bastante sencilla para la mayoría de los principales marcos de Javascript.

Answer 4

@Jack y @ 17 de 26, buen punto, pero el usuario final esperará que el cuadro de selección esté deshabilitado para que la confusión no sea un problema.

Debería haber sido más claro acerca de por qué no podía simplemente desactivar el control.

La aplicación que utilizará esto deberá deshabilitar la selección de opciones y existe el requisito de que el control "bloqueado" aún mantenga la apariencia de los controles de formato normal.

Answer 5

Pruebe este disparador.

<select multiple onchange="this.selectedIndex=this.selectedIndex">
<option>1</option>
<option>2</option>
</select>

Answer 6

Hay una nueva incorporación reciente a CSS3 que es 95% compatible con todos los navegadores actuales excepto Opera Mini, llamado pointer-events.En pocas palabras, puede "deshabilitar" la acción predeterminada en un SELECT o cualquier otro elemento, y aún poder realizar eventos específicos en él...

Puede ver el artículo de Chris Coyier sobre ellos en ingrese la descripción del enlace aquí.

¿Esto se acerca más a lo que estás buscando...?Lamento no poder proporcionar ninguno de mis propios ejemplos de codificación...