Twitter bootstrap select readonly todavía puede cambiar las opciones

3 minutos de lectura

Tengo una selección de arranque con readonly="true" pero aún puedo cambiar la opción seleccionada.

Necesito el disabled="true" comportamiento, pero cuando uso esto, la selección no se envía.

Necesito una combinación de los 2, la opción seleccionada no se puede cambiar, pero se debe enviar la selección.

Podría usar campos ocultos, pero esperaba una solución más fácil.

  • No creo que ningún complemento de reemplazo seleccionado tenga este comportamiento, como estándar select elemento no lo admite. Si lo necesita, lo más probable es que necesite codificarlo usted mismo o, como dice, deshabilitar el elemento y usar una entrada oculta.

    –Rory McCrossan

    29/09/2015 a las 14:40

Me encontré con un problema similar y lo que hago es cuando se activa el evento onsubmit del formulario, elimino los atributos deshabilitados ya que el navegador no publicará los atributos deshabilitados en el servidor.

$('form').submit(function () { $('[disabled]').removeAttr('disabled'); })

Como mencionó, la única otra opción que he encontrado es encontrar los valores de las entradas ocultas.

Avatar de usuario de BHoft
BHoft

Otra posibilidad podría ser usar un reemplazo de selección con menús desplegables allí, debería ser posible deshabilitar el menú desplegable pero aún así enviar el valor del elemento de selección oculto. Pero entonces también podrías usar campos ocultos…

O realmente agrega un campo oculto con el valor seleccionado en caso de que el elemento de selección esté deshabilitado.

<input type="hidden" name="whatever">
<select name="whatever">

Si el campo oculto tiene el mismo nombre que la selección, el valor seleccionado de la selección debe sobrescribir el valor enviado del campo oculto (por ejemplo, cuando el campo de selección está habilitado dinámicamente con js). Y si la selección está deshabilitada, se envía el valor del campo oculto. No estoy seguro del orden de lo que se envía primero.

$(document).ready(function(){$('select option:not(:selected)').attr('disabled',true);});

esta solución también debería funcionar (al menos con js habilitado). Deshabilita todas las opciones no seleccionadas. Y por lo tanto, la opción seleccionada se envía y no se puede cambiar.

Hay una pregunta similar y ya respondida html-form-readonly-select-tag-input

  • gracias, utilicé tu última solución: $(‘select[readonly] option:not(:selected)’).attr(‘disabled’, true);

    – Rubén

    30 de septiembre de 2015 a las 7:50

  • ¿Puedes también resaltar tu enlace a la otra publicación, las respuestas son más completas que las mías, tal vez la mía sea un duplicado?

    – Rubén

    30 de septiembre de 2015 a las 7:56

Al cargar la página, agregue deshabilitado a solo lectura

$('[readonly]').prop( "disabled", true );

Antes de enviar eliminar deshabilitado

$('[readonly]').prop( "disabled", false );

Nota del documento de Jquery:

A partir de jQuery 1.6, el método .attr() devuelve undefined para los atributos que no se han establecido. Para recuperar y cambiar las propiedades del DOM, como el estado marcado, seleccionado o deshabilitado de los elementos del formulario, use el método .prop().

La mejor solución es no usar deshabilitado. Use jquery para anular la acción para abrir seleccionar con

$(‘seleccionar[readonly]’).on(“focus”, function(e){ e.preventDefault(); });

¿Ha sido útil esta solución?