Come assicurarsi che un campo modulo <select> sia inviato quando è disabilitato?

Ho un selectcampo modulo che desidero contrassegnare come "di sola lettura", poiché l'utente non può modificare il valore, ma il valore viene comunque inviato con il modulo. L'uso disableddell'attributo impedisce all'utente di modificare il valore, ma non invia il valore con il modulo.

L' readonlyattributo è disponibile solo per inpute textareacampi, ma è fondamentalmente quello che voglio. C'è un modo per farlo funzionare?

Due possibilità che sto prendendo in considerazione includono:

• Invece di disabilitare il select, disabilitare tutti optioni se usare CSS per rendere grigia la selezione in modo che sembri disabilitata.
• Aggiungi un gestore eventi click al pulsante di invio in modo da abilitare tutti i menu a discesa disabilitati prima di inviare il modulo.

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

Dov'è select_nameil nome che normalmente daresti <select>.

Un'altra opzione.

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

Ora, con questo, ho notato che, a seconda del server Web che stai utilizzando, potresti dover inserire l' hiddeninput prima o dopo il <select>.

Se la mia memoria mi serve correttamente, con IIS, la metti prima, con Apache la metti dopo. Come sempre, i test sono fondamentali.

Disabilitare i campi e quindi abilitarli prima dell'invio del modulo:

codice jQuery:

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

Ho cercato una soluzione per questo, e dal momento che non ho trovato una soluzione in questo thread ho fatto la mia.

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

Semplice, offuschi il campo quando ti concentri su di esso, qualcosa come disabilitarlo, ma in realtà invii i suoi dati.

Ho dovuto affrontare uno scenario leggermente diverso, in quanto volevo solo non consentire all'utente di modificare il valore selezionato in base a una casella di selezione precedente. Quello che ho finito per fare è stato semplicemente disabilitare tutte le altre opzioni non selezionate nella casella selezionata utilizzando

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

Stessa soluzione suggerita da Tres senza usare 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>

Questo potrebbe aiutare qualcuno a capire di più, ma ovviamente è meno flessibile di quello di jQuery.

non funziona con il selettore di input per selezionare i campi, usare questo:

    jQuery(function() {

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

    });

Uso il codice successivo per disabilitare le opzioni nelle selezioni

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

Il modo più semplice che ho trovato è stato quello di creare una minuscola funzione javascript legata al tuo modulo:

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

e lo chiami nel tuo modulo qui:

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

Oppure puoi chiamarlo nella funzione che usi per controllare il tuo modulo :)

Basta aggiungere una riga prima di inviare.

$ ( "# XYZ") removeAttr ( "disabilitata.");

Oppure usa JavaScript per modificare il nome della selezione e impostarlo su disabilitato. In questo modo la selezione viene comunque inviata, ma utilizzando un nome che non si sta verificando.

Ho installato un plug-in rapido (solo Jquery), che salva il valore in un campo dati mentre un input è disabilitato. Questo significa solo finché il campo viene disabilitato a livello di codice tramite jquery usando .prop () o .attr () ... quindi accedendo al valore con .val (), .serialize () o .serializeArra () restituirà sempre il valore anche se disabilitato :)

Spina senza vergogna: https://github.com/Jezternz/jq-disabled-inputs

Sulla base della soluzione della Giordania, ho creato una funzione che crea automaticamente un input nascosto con lo stesso nome e lo stesso valore della selezione che si desidera rendere non valido. Il primo parametro può essere un id o un elemento jquery; il secondo è un parametro facoltativo booleano in cui "true" disabilita e "false" abilita l'input. Se omesso, il secondo parametro commuta la selezione tra "abilitato" e "disabilitato".

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

Ho trovato una soluzione praticabile: rimuovere tutti gli elementi tranne quello selezionato. È quindi possibile modificare lo stile in qualcosa che sembra disabilitato. Utilizzando 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");
}

Un'altra opzione è utilizzare l'attributo readonly.

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

Con readonly il valore è ancora inviato, il campo di input è disattivato e l'utente non può modificarlo.

Modificare:

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

• Gli elementi di sola lettura ricevono lo stato attivo ma non possono essere modificati dall'utente.
• Gli elementi di sola lettura sono inclusi nella navigazione delle schede.
• Gli elementi di sola lettura potrebbero avere esito positivo.

Quando dice che l'elemento può avere successo, significa che può essere inviato, come indicato qui: http://www.w3.org/TR/html401/interact/forms.html#successful-controls