Como garantir que um campo de formulário <selecionar> seja enviado quando desativado?

Eu tenho um selectcampo de formulário que quero marcar como "somente leitura", pois o usuário não pode modificar o valor, mas o valor ainda é enviado com o formulário. O uso do disabledatributo evita que o usuário altere o valor, mas não envia o valor com o formulário.

O readonlyatributo está disponível apenas para inpute textareacampos, mas é basicamente isso que eu quero. Existe alguma maneira de fazer isso funcionar?

Duas possibilidades que estou considerando incluem:

• Em vez de desabilitar o select, desative todos os se optionuse CSS para esmaecer a seleção, para que pareça desabilitada.
• Adicione um manipulador de eventos de clique ao botão enviar para ativar todos os menus suspensos desabilitados antes de enviar o formulário.

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

Onde select_nameestá o nome que você normalmente daria ao<select> .

Outra opção.

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

Agora, com este, notei que, dependendo do servidor da web que você estiver usando, talvez seja necessário hiddeninserir a entrada antes ou depois do<select> .

Se minha memória me serve corretamente, com o IIS, você o coloca antes, com o Apache, depois. Como sempre, o teste é fundamental.

Desative os campos e ative-os antes do envio do formulário:

Código jQuery:

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

Eu estive procurando uma solução para isso, e desde que eu não encontrei uma solução neste segmento, fiz o meu.

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

Simples, você apenas desfoca o campo quando se concentra nele, algo como desativá-lo, mas na verdade envia os dados.

Fui confrontado com um cenário um pouco diferente, pois queria apenas não permitir que o usuário alterasse o valor selecionado com base em uma caixa de seleção anterior. O que acabei fazendo foi desativar todas as outras opções não selecionadas na caixa de seleção usando

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

Mesma solução sugerida por Tres sem usar o 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>

Isso pode ajudar alguém a entender mais, mas obviamente é menos flexível que o jQuery.

se não funcionar com o seletor: input para campos selecionados, use este:

    jQuery(function() {

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

    });

Eu uso o próximo código para desativar as opções nas seleções

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

A maneira mais fácil que encontrei foi criar uma pequena função javascript vinculada ao seu formulário:

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

e você pode chamá-lo em seu formulário aqui:

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

Ou você pode chamá-lo na função que você usa para verificar seu formulário :)

Basta adicionar uma linha antes de enviar.

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

Ou use algum JavaScript para alterar o nome do select e defina-o como desativado. Dessa forma, a seleção ainda é enviada, mas usando um nome que você não está verificando.

Criei um plug-in rápido (apenas no Jquery), que salva o valor em um campo de dados enquanto uma entrada está desativada. Isso significa apenas que enquanto o campo estiver sendo desabilitado programaticamente através do jquery usando .prop () ou .attr () ... o acesso ao valor por .val (), .serialize () ou .serializeArra () sempre retornará o valor valor mesmo se desativado :)

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

Com base na solução do Jordan, criei uma função que cria automaticamente uma entrada oculta com o mesmo nome e o mesmo valor da seleção que você deseja tornar inválida. O primeiro parâmetro pode ser um elemento id ou jquery; o segundo é um parâmetro opcional booleano em que "true" desativa e "false" ativa a entrada. Se omitido, o segundo parâmetro alterna a seleção entre "ativado" e "desativado".

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

Encontrei uma solução viável: remova todos os elementos, exceto o selecionado. Você pode alterar o estilo para algo que pareça desativado também. 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");
}

Outra opção é usar o atributo somente leitura.

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

Com somente leitura, o valor ainda é enviado, o campo de entrada fica acinzentado e o usuário não pode editá-lo.

Editar:

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

• Os elementos somente leitura recebem foco, mas não podem ser modificados pelo usuário.
• Os elementos somente leitura estão incluídos na navegação por guias.
• Elementos somente leitura podem ser bem-sucedidos.

Quando diz que o elemento pode ter êxito, significa que pode ser enviado, conforme indicado aqui: http://www.w3.org/TR/html401/interact/forms.html#successful-controls