Comment faire html <select> élément de ressembler à “désactivé”, mais de transmettre des valeurs?

Quand je suis à la désactivation d'un

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

élément, il ne marche pas passer sa variable.

Quoi faire regarder comme des personnes handicapées, mais être dans l'état "normal"?

C'est parce que j'ai une liste de "choisit", et parfois, certains d'entre eux ont une valeur unique, de sorte que l'utilisateur doit comprendre qu'il n'a qu'une valeur sans cliquer dessus.

Ne suffit-il pas qu'elle se concentre l'élément, voir la seule option, puis accepter qu'il n'y a qu'une option? S'ils ne peuvent pas faire n'importe quoi avec l'élément, il suffit d'utiliser régulièrement input avec un readonly attribut, ou un caché d'entrée.
Si elle n'a qu'une option, pourquoi a-t-elle besoin pour être en forme? Aussi, notez qu'un pas-un ignorant, l'utilisateur sera en mesure de changer l'sélectionnez une valeur facilement.
Je suis heureux d', mais vous ne savez pas ce que c'est
il semble que vous êtes en s'appuyant sur le formulaire de retour de valeur spécifique dont vous avez besoin. Avez-vous pensé que l'utilisateur peut envoyer n'importe quelle valeur que <select> élément? Vérifiez toujours votre formulaire. Si il ya juste une seule valeur possible, il ne faut pas s'en soucier du tout: le programme serait automatiquement remplir de toute façon, car il ne faut pas permettre à d'autres valeurs d'être sélectionné!
Merci, Rookie, je le ferai. =)
Il ya des moments où la demande du commettant, est parfaitement souhaitable de comportement. par exemple. Quand il y a normalement beaucoup d'options disponibles, mais une combinaison d'autres sélections sur le formulaire permet seulement 1 sélection spécifique. La sélection de l'option et la désactivation du contrôle serait de loin supérieur à d'autres javascript manigances.

InformationsquelleAutor el Dude | 2012-10-07

53

Vous pouvez le garder désactivé comme désiré, puis retirez les personnes handicapées de l'attribut avant que le formulaire est soumis.
```
$('#myForm').submit(function() {
    $('select').removeAttr('disabled');
});
```
Notez que si vous utilisez cette méthode, vous aurez envie de le désactiver par programme ainsi, parce que si le JS est désactivé ou n'est pas pris en charge, vous serez coincé avec l'sélectionnez désactivé.
```
$(document).ready(function() {
    $('select').attr('disabled', 'disabled');
});
```
- il semble être la seule solution.
- Si vous n'êtes pas vraiment heureux avec le même comportement lorsqu'il ne contient qu'une seule option, alors la seule autre solution que je puisse imaginer serait d'utiliser les CSS pour imiter l'apparence d'un objet désactivé, comme suggéré Praveen
- Quand vous avez gardé désactivé, les utilisateurs ne seront pas en mesure de soumettre les données. C'est que bien avec vous?
- Il est strictement contre les normes HTML pour handicapés champ de formulaire pour être inclus lors de la soumission du formulaire
- Le code dans le gestionnaire de soumission ci-dessus est exécuté avant que le formulaire est soumis. Donc, le temps que le formulaire est soumis, l'élément select n'ont plus les personnes handicapées de l'attribut. En outre, vous pouvez ajouter "return false;" pour le gestionnaire de soumission pour empêcher toute forme de soumission.
- ce sera peut-être pour mieux cacher "une valeur sélectionne" avec "display:none" et à la place d'un mannequin "une valeur sélectionne" sans noms et les handicapés attrubute?
- Je ne suis pas. La solution ci-dessus devrait fonctionner parfaitement bien.
- est-il un pur js solution pour effacer "désactivé-s" dans les entrées sans cycle?
- Cependant, vous pouvez voir le bouton select flash de désactivé à activé réel rapide que le formulaire est soumis. Réglage display:none et à l'aide d'un mannequin serait trop de travail, mais si vous allez aussi loin que vous pouvez tout aussi bien utiliser un caché d'entrée, comme d'autres l'ont suggéré
- Je ne suis pas sûr de ce que tu veux dire par "sans cycle", mais oui, vous pouvez utiliser le code ci-dessus pour supprimer les personnes handicapées de l'attribut de toutes les entrées de l'utilisateur. Juste utiliser le sélecteur. $('input, select, textarea').removeAttr('disabled');
- Je veux dire, c'est JQ.
- false; ou document.getElementById('yourselectid').removeAttribute('disabled');
- Notez que cette solution n'a pas de dégradation gracieuse. Si le JS est désactivé ou non pris en charge, la valeur ne sera pas publié. Sans doute que cassera votre formulaire.
- Bon point, voir modifier
- pour amélioration progressive!
- 1. Je veux dire, permettre à de nombreuses entrées d'un coup de code =) 2. Et oui, avec pas js activé, il devient nulle, c'est pourquoi j'ai pensé à réaliser avec des mannequins, comme décrit dans mon "22 heures" commentaire.
- Ce n'est pas une solution, mais c'est une alternative.
- Si vous sont morts ensemble sur le garder désactivé, vous pouvez créer un caché d'entrée sur le formulaire de soumission, puis le remplir avec le nom et la valeur de la sélectionner
InformationsquelleAutor tomaroo
12
```
<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);
```
- C'est beaucoup mieux car il ne nécessite pas la suppression de désactivé avant de la soumettre.
- Note, vous devez ajouter .not(":selected") avant de définir la propriété pour garder l'élément sélectionné est activé.
InformationsquelleAutor dingyuchi
9

Ma solution a été de créer un handicapé qui se classe dans le CSS:
```
.disabled {
    pointer-events: none;
    cursor: not-allowed;
}
```
et puis vous sélectionnez serait:
```
<select name="sel" class="disabled">
    <option>123</option>
</select>
```
L'utilisateur serait pas en mesure de choisir toutes les valeurs, mais les sélectionner la valeur doit toujours être passée sur le formulaire de soumission.
- De cette façon, vous pouvez toujours parcourir pour le sélectionner à l'aide de l'ONGLET, puis changez l'option sélectionnée à l'aide du clavier touches fléchées haut/bas.
- Aussi IE ne prend pas en charge pointer-events, vous pouvez naviguer à l'aide de la souris.
InformationsquelleAutor Denis Priebe
6

Si vous pouvez fournir une valeur par défaut pour vos sélections, vous pouvez utiliser la même approche pour les décoché les cases à cocher qui nécessite un caché d'entrée avant de l'élément actuel, que ce n'est pas le poste d'une valeur si on les laissait faire:
```
<input type="hidden" name="myfield" value="default" />
<select name="myfield">
    <option value="default" selected="selected">Default</option>
    <option value="othervalue">Other value</option>
    
</select>
```
Ce sera fait, poste de la valeur "par défaut" (sans les guillemets, bien sûr) si la sélection est désactivée par javascript (jQuery) ou même si votre code écrit le code html de la désactivation de l'élément lui-même avec l'attribut: disabled="disabled".
- Cette pensée est une meilleure solution pour la accepté de répondre.. quelqu'un aurait-il un argument contre qui?
InformationsquelleAutor Kirito
3

Ajouter une classe .disabled et utiliser ce CSS:
```
.disabled {border: 1px solid #999; color: #333; opacity: 0.5;}
.disabled option {color: #000; opacity: 1;}
```
Démo: http://jsfiddle.net/ZCSRq/
- Praveen, merci, j'ai déjà essayé, c'est pratique, mais assez ", sélectionnez" a flèche qui ouvre la liste, et il est gris dans l'état désactivé. Et ce n'est pas activée.
- Désolé, mon mauvais. Mise à jour de la réponse @EL2002 veuillez jeter un oeil.
- Merci, mais il ne ressemble pas désactivé, désolé =(
- Voir si cela fonctionne! 🙂
InformationsquelleAutor Praveen Kumar Purushothaman
2

On pourrait utiliser une autre cachée élément d'entrée avec le même nom et la même valeur que celle de l'désactivé liste. Cela permettra d'assurer que la valeur est passée dans $_POST variables.

Par exemple:

HTML:
```
<select name="sel" disabled><option>123</select>
<input type="hidden" name="sel" value=123>
```
- Ce n'est pas une solution, mais c'est une alternative.
InformationsquelleAutor user3654478
1

Wow, j'ai eu le même problème, mais une ligne de code 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
```
- Je envoyer le formulaire à un script php puis il imprime la valeur correcte pour chacune des options alors qu'il était "nul" avant de.

Me dire si cela fonctionne. Je me demande si cela ne fonctionne que sur la mienne en quelque sorte.

InformationsquelleAutor user3290525
0

si vous ne voulez pas ajouter l'attribut disabled pouvez le faire par programmation

pouvez désactiver l'édition dans le <select class="yourClass"> élément 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 l'essayer pouvez le voir ici: https://jsfiddle.net/9kjqjLyq/

InformationsquelleAutor Robert Blasco Villarroya

Vous devez vous connecter pour publier un commentaire.

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