web-dev-qa-db-fra.com

Comment faire en sorte que l'élément HTML <select> ressemble à "désactivé", mais transmette des valeurs?

Quand je désactive un 

<select name="sel" disabled>
    <option>123</option>
</select>

élément, il ne passe pas sa variable.

Que faire pour que cela ressemble à désactivé, mais être dans un état "normal"?

En effet, j’ai une liste de "sélections", et parfois certaines d’entre elles ont une valeur unique. L’utilisateur doit donc comprendre qu’il n’a qu’une valeur sans cliquer dessus.

htmlselectdisabled-input
39
el Dude

Vous pouvez le laisser désactivé comme vous le souhaitez, puis supprimer l'attribut désactivé avant la soumission du formulaire.

$('#myForm').submit(function() {
    $('select').removeAttr('disabled');
});

Notez que si vous utilisez cette méthode, vous voudrez également la désactiver par programme, car si JS est désactivé ou n'est pas pris en charge, vous serez bloqué avec la sélection désactivée.

$(document).ready(function() {
    $('select').attr('disabled', 'disabled');
});
51
tomaroo
<select id="test" name="sel">
  <option disabled>1</option>
  <option disabled>2</option>
</select>

ou vous pouvez utiliser jQuery

$("#test option:not(:selected)").prop("disabled", true);
12
dingyuchi

Ma solution était de créer une classe désactivée en CSS:

.disabled {
    pointer-events: none;
    cursor: not-allowed;
}

et puis votre sélection serait:

<select name="sel" class="disabled">
    <option>123</option>
</select>

L'utilisateur serait incapable de choisir des valeurs, mais la valeur sélectionnée serait toujours transmise lors de la soumission du formulaire.

9
Denis Priebe

Si vous pouvez fournir une valeur par défaut pour vos sélections, vous pouvez utiliser la même approche pour les cases à cocher non cochées, ce qui nécessite une entrée masquée avant l'élément réel, car elles ne publient pas de valeur si elles ne sont pas cochées:

<input type="hidden" name="myfield" value="default" />
<select name="myfield">
    <option value="default" selected="selected">Default</option>
    <option value="othervalue">Other value</option>
    <!-- ... //-->
</select>

Ceci affichera la valeur "default" (sans les guillemets, évidemment) si la sélection est désactivée par javascript (ou jQuery) ou même si votre code écrit le code HTML désactivant l'élément lui-même avec l'attribut: disabled = "disabled".

6
Kirito

Ajoutez une classe .disabled et utilisez ceci CSS:

​.disabled {border: 1px solid #999; color: #333; opacity: 0.5;}
.disabled option {color: #000; opacity: 1;}​

Démo: http://jsfiddle.net/ZCSRq/

3
Praveen Kumar Purushothaman

On pourrait utiliser un élément d'entrée masqué supplémentaire ayant le même nom et la même valeur que celui de la liste des personnes désactivées. Cela garantira que la valeur est passée dans les variables $ _POST.

Par exemple:

<select name="sel" disabled><option>123</select>
<input type="hidden" name="sel" value=123>

2
user3654478

Wow, j'ai eu le même problème, mais une ligne de code a résolu mon problème. J'ai écrit

$last_child_topic.find( "*" ).prop( "disabled", true );
$last_child_topic.find( "option" ).prop( "disabled", false );   //This seems to work on mine

J'envoie le formulaire à un script php puis il affiche la valeur correcte pour chaque option alors qu'il était "null" auparavant.

Dis-moi si ça marche. Je me demande si cela ne fonctionne que sur le mien.

1
user3290525

si vous ne voulez pas ajouter l'attr désactivé, vous pouvez le faire par programme

pouvez désactiver l'édition dans l'élément <select class="yourClass"> avec ce code:

//bloqueo selects
  //block all selects
  jQuery(document).on("focusin", 'select.yourClass', function (event) {
    var $selectDiabled = jQuery(this).attr('disabled', 'disabled');
    setTimeout(function(){ $selectDiabled.removeAttr("disabled"); }, 30);
  });

si vous voulez essayer on peut le voir ici: https://jsfiddle.net/9kjqjLyq/

0
Robert Blasco Villarroya