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

seleccionar valor por defecto select javascript

Question

Tengo un campo de formulario select que quiero marcar como "de solo lectura", ya que en el usuario no se puede modificar el valor, pero el valor aún se envía con el formulario. El uso del atributo disabled impide que el usuario cambie el valor, pero no envía el valor con el formulario.

El atributo de solo readonly solo está disponible para input campos input y textarea , pero eso es básicamente lo que quiero. ¿Hay alguna forma de hacerlo funcionar?

Dos posibilidades que estoy considerando incluyen:

• En lugar de deshabilitar la select , deshabilite todas las option y use CSS para atenuar la selección para que parezca que está deshabilitada.
• Agregue un controlador de evento de clic al botón de envío para habilitar todos los menús desplegables deshabilitados antes de enviar el formulario.

Answer 1

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

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

Answer 2

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 del seleccionado que desea invalidar. El primer parámetro puede ser un elemento id o un elemento jquery; el segundo es un parámetro booleano opcional donde "true" desactiva y "false" habilita la entrada. Si se omite, el segundo parámetro cambia la selección entre "activado" y "desactivado".

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");

Answer 3

Encontré una solución viable: eliminar todos los elementos excepto el seleccionado. A continuación, puede cambiar el estilo a algo que también parece estar deshabilitado. Usando jQuery:

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

Answer 4

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

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

Simple, simplemente difumina el campo cuando se enfoca en él, algo así como deshabilitarlo, pero en realidad envía sus datos.

Answer 5

Inhabilite 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);
});
});

Answer 6

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 forma aquí:

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

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

Answer 7

Me enfrenté a una situación ligeramente diferente, en la que solo quería que el usuario no permitiera cambiar el valor seleccionado en función de una casilla de selección anterior. Lo que terminé haciendo fue deshabilitar todas las demás opciones no seleccionadas en la casilla de selección usando

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

Answer 8

O use algo de JavaScript para cambiar el nombre de la selección y establézcalo en deshabilitado. De esta forma, la selección aún se envía, pero con un nombre que no está verificando.

Answer 9

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

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

Con solo leer el valor todavía 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 de tabulación.
• Los elementos de solo lectura pueden ser exitosos.

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

Answer 10

Solo agrega una línea antes de enviar.

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

Answer 11

Uso el siguiente código para desactivar 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'');
});

Answer 12

no funciona con el selector de entrada para seleccionar campos, usa esto:

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

Answer 13

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 puede ayudar a alguien a entender más, pero obviamente es menos flexible que el jQuery.

Answer 14

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

Donde select_name es el nombre que normalmente le daría a <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 de qué servidor web estés usando, es posible que tengas que ingresar la entrada hidden antes o después de <select> .

Si mi memoria me sirve correctamente, con IIS, lo pones antes, con Apache lo pones después. Como siempre, las pruebas son clave.

Answer 15

<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");
}