¿Cómo asegurar que se envíe un campo de formulario <select> cuando está deshabilitado?

Tengo un selectcampo de formulario que quiero marcar como "solo lectura", ya que el usuario no puede modificar el valor, pero el valor aún se envía con el formulario. El uso del disabledatributo evita que el usuario cambie el valor, pero no envía el valor con el formulario.

El readonlyatributo solo está disponible para inputy textareacampos, pero eso es básicamente lo que quiero. ¿Hay alguna manera de hacer que eso funcione?

Dos posibilidades que estoy considerando incluyen:

• En lugar de deshabilitar select, deshabilite todos los mensajes de correo electrónico optiony use CSS para atenuar la selección para que parezca deshabilitada.
• Agregue un controlador de eventos de clic al botón de envío para que habilite todos los menús desplegables deshabilitados antes de enviar el formulario.

<select disabled="disabled">
    ....
</select>
<input type="hidden" name="select_name" value="selected value" />

¿Dónde select_nameestá el nombre que normalmente le daría al<select> .

Otra opción.

<select name="myselect" disabled="disabled">
    <option value="myselectedvalue" selected="selected">My Value</option>
    ....
</select>
<input type="hidden" name="myselect" value="myselectedvalue" />

Ahora con este, he notado que dependiendo del servidor web que esté utilizando, es posible que tenga que poner la hiddenentrada antes o después del<select> .

Si mi memoria me sirve correctamente, con IIS, lo pones antes, con Apache lo pones después. Como siempre, la prueba es clave.

Deshabilite los campos y luego habilítelos antes de enviar el formulario:

Código jQuery:

jQuery(function ($) {        
  $('form').bind('submit', function () {
    $(this).find(':input').prop('disabled', false);
  });
});

He estado buscando una solución para esto, y como no encontré una solución en este hilo, hice la mía.

// With jQuery
$('#selectbox').focus(function(e) {
    $(this).blur();
});

Simple, simplemente desenfoca el campo cuando te enfocas en él, algo así como deshabilitarlo, pero en realidad envías sus datos.

Me enfrenté a un escenario ligeramente diferente, ya que solo quería no permitir que el usuario cambiara el valor seleccionado en función de un cuadro de selección anterior. Lo que terminé haciendo fue deshabilitar todas las otras opciones no seleccionadas en el cuadro de selección usando

$('#toSelect')find(':not(:selected)').attr('disabled','disabled');

La misma solución sugerida por Tres sin usar jQuery

<form onsubmit="document.getElementById('mysel').disabled = false;" action="..." method="GET">

   <select id="mysel" disabled="disabled">....</select>

   <input name="submit" id="submit" type="submit" value="SEND FORM">
</form>

Esto podría ayudar a alguien a entender más, pero obviamente es menos flexible que el de jQuery.

no funciona con el: selector de entrada para campos seleccionados, use esto:

    jQuery(function() {

    jQuery('form').bind('submit', function() {
        jQuery(this).find(':disabled').removeAttr('disabled');
    });

    });

Uso el siguiente código para deshabilitar las opciones en las selecciones

<select class="sel big" id="form_code" name="code" readonly="readonly">
   <option value="user_played_game" selected="true">1 Game</option>
   <option value="coins" disabled="">2 Object</option>
   <option value="event" disabled="">3 Object</option>
   <option value="level" disabled="">4 Object</option>
   <option value="game" disabled="">5 Object</option>
</select>

// Disable selection for options
$('select option:not(:selected)').each(function(){
 $(this).attr('disabled', 'disabled');
});

La forma más fácil que encontré fue crear una pequeña función de JavaScript vinculada a su formulario:

function enablePath() {
    document.getElementById('select_name').disabled= "";
}

y lo llamas en tu formulario aquí:

<form action="act.php" method="POST" name="form_name" onSubmit="enablePath();">

O puede llamarlo en la función que utiliza para verificar su formulario :)

Simplemente agregue una línea antes de enviar.

$ ("# XYZ"). RemoveAttr ("disabled");

O use JavaScript para cambiar el nombre de la selección y configurarla como deshabilitada. De esta manera, la selección aún se envía, pero con un nombre que no está marcando.

Creé un complemento rápido (solo Jquery), que guarda el valor en un campo de datos mientras una entrada está deshabilitada. Esto solo significa que mientras el campo se deshabilite programáticamente mediante jquery usando .prop () o .attr () ... luego acceder al valor mediante .val (), .serialize () o .serializeArra () siempre devolverá el valor incluso si está deshabilitado :)

Enchufe descarado: https://github.com/Jezternz/jq-disabled-inputs

Basado en la solución de Jordan, creé una función que crea automáticamente una entrada oculta con el mismo nombre y el mismo valor de la selección que desea invalidar. El primer parámetro puede ser un id o un elemento jquery; el segundo es un parámetro opcional booleano donde "verdadero" deshabilita y "falso" habilita la entrada. Si se omite, el segundo parámetro cambia la selección entre "habilitado" y "deshabilitado".

function changeSelectUserManipulation(obj, disable){
    var $obj = ( typeof obj === 'string' )? $('#'+obj) : obj;
    disable = disable? !!disable : !$obj.is(':disabled');

    if(disable){
        $obj.prop('disabled', true)
            .after("<input type='hidden' id='select_user_manipulation_hidden_"+$obj.attr('id')+"' name='"+$obj.attr('name')+"' value='"+$obj.val()+"'>");
    }else{
        $obj.prop('disabled', false)
            .next("#select_user_manipulation_hidden_"+$obj.attr('id')).remove();
    }
}

changeSelectUserManipulation("select_id");

Encontré una solución viable: eliminar todos los elementos excepto el seleccionado. Luego puede cambiar el estilo a algo que también parezca deshabilitado. Usando jQuery:

jQuery(function($) {
    $('form').submit(function(){
        $('select option:not(:selected)', this).remove();
    });
});

<select id="example">
    <option value="">please select</option>
    <option value="0" >one</option>
    <option value="1">two</option>
</select>



if (condition){
    //you can't select
    $("#example").find("option").css("display","none");
}else{
   //you can select
   $("#example").find("option").css("display","block");
}

Otra opción es utilizar el atributo de solo lectura.

<select readonly="readonly">
    ....
</select>

Con solo lectura, el valor aún se envía, el campo de entrada aparece atenuado y el usuario no puede editarlo.

Editar:

Citado de http://www.w3.org/TR/html401/interact/forms.html#adef-readonly :

• Los elementos de solo lectura reciben foco pero el usuario no puede modificarlos.
• Los elementos de solo lectura se incluyen en la navegación por tabulación.
• Los elementos de solo lectura pueden ser exitosos.

Cuando dice que el elemento puede tener éxito, significa que puede enviarse, como se indica aquí: http://www.w3.org/TR/html401/interact/forms.html#successful-controls