web-dev-qa-db-fra.com

comment définir l'élément select en lecture seule ('disabled' ne transmet pas la valeur select sur le serveur)

Lorsque j’utilise l’un des codes suivants, l’élément select a l’air désactivé, mais la sélection n’est pas transmise au serveur: je pense au readonly à utiliser, mais je ne sais pas ou est-ce que ça va résoudre le problème. Toute aide est très appréciée.

$('#selectID').prop('disabled',true);

$('#selectID').prop('disabled','disabled');

$('#selectID').attr('disabled',true);

$('#selectID').attr('disabled','disabled');
javascriptjqueryselectreadonly
18
bumbumpaw

Pour pouvoir passer le select, je viens de le redéfinir sur:

  $('#selectID').prop('disabled',false);

ou

  $('#selectID').attr('disabled',false);

en passant la demande.

9
bumbumpaw

see this answer - formulaire HTML en lecture seule SELECT balise/input

Vous devez laisser l'élément select désactivé mais également ajouter une autre entrée masquée avec le même nom et la même valeur.

Si vous réactivez votre SELECT, vous devez copier sa valeur dans l'entrée masquée d'un événement onchange.

voyez ce violon pour montrer comment extraire la valeur sélectionnée dans une sélection désactivée dans un champ masqué qui sera soumis dans le formulaire.

<select disabled="disabled" id="sel_test">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

<input type="hidden" id="hdn_test" />
<div id="output"></div>

$(function(){
    var select_val = $('#sel_test option:selected').val();
    $('#hdn_test').val(select_val);
    $('#output').text('Selected value is: ' + select_val);
});

j'espère que ça t'as aidé.

20
geevee

sans désactiver la valeur sélectionnée lors de la soumission.

$('#selectID option:not(:selected)').prop('disabled', true);

If you use Jquery version lesser than 1.7
$('#selectID option:not(:selected)').attr('disabled', true);

Ça marche pour moi..

6
Prabhagaran

Pour simplifier les choses, voici un plugin jQuery qui peut atteindre cet objectif: https://github.com/haggen/readonly

  1. Incluez readonly.js dans votre projet. (a aussi besoin de jquery)

  2. Remplacez .attr('readonly', 'readonly') par .readonly() à la place. C'est ça.

    Par exemple, passez de $(".someClass").attr('readonly', 'readonly'); à $(".someClass").readonly();.

5
Perry Chiang