Formulario HTML de solo lectura SELECT etiqueta/entrada
Según las especificaciones HTML, la selectetiqueta en HTML no tiene un readonlyatributo, sólo un disabledatributo. Entonces, si desea evitar que el usuario cambie el menú desplegable, debe usar disabled.
El único problema es que las entradas de formulario HTML deshabilitadas no se incluyen en los datos POST/GET.
¿Cuál es la mejor manera de emular el readonlyatributo de una selectetiqueta y aún así obtener los datos POST?
Debes mantener el selectelemento disabledpero también agregar otro oculto inputcon el mismo nombre y valor.
Si vuelve a habilitar su SELECT, debe copiar su valor a la entrada oculta en un evento de cambio y deshabilitar (o eliminar) la entrada oculta.
Aquí hay una demostración:
$('#mainform').submit(function() {
$('#formdata_container').show();
$('#formdata').html($(this).serialize());
return false;
});
$('#enableselect').click(function() {
$('#mainform input[name=animal]')
.attr("disabled", true);
$('#animal-select')
.attr('disabled', false)
.attr('name', 'animal');
$('#enableselect').hide();
return false;
});#formdata_container {
padding: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<form id="mainform">
<select id="animal-select" disabled="true">
<option value="cat" selected>Cat</option>
<option value="dog">Dog</option>
<option value="hamster">Hamster</option>
</select>
<input type="hidden" name="animal" value="cat"/>
<button id="enableselect">Enable</button>
<select name="color">
<option value="blue" selected>Blue</option>
<option value="green">Green</option>
<option value="red">Red</option>
</select>
<input type="submit"/>
</form>
</div>
<div id="formdata_container" style="display:none">
<div>Submitted data:</div>
<div id="formdata">
</div>
</div>
También podríamos desactivar todo excepto la opción seleccionada.
De esta manera, el menú desplegable sigue funcionando (y envía su valor) pero el usuario no puede seleccionar otro valor.
Manifestación
<select>
<option disabled>1</option>
<option selected>2</option>
<option disabled>3</option>
</select>
Puede volver a habilitar el objeto seleccionado al enviarlo.
EDITAR : es decir, normalmente deshabilitar la etiqueta de selección (con el atributo deshabilitado) y luego volver a habilitarla automáticamente justo antes de enviar el formulario:
Ejemplo con jQuery:
Para desactivarlo:
$('#yourSelect').prop('disabled', true);Para volver a habilitarlo antes del envío para que se incluyan los datos GET/POST:
$('#yourForm').on('submit', function() { $('#yourSelect').prop('disabled', false); });
Además, puede volver a habilitar cada entrada deshabilitada o seleccionar:
$('#yourForm').on('submit', function() {
$('input, select').prop('disabled', false);
});
