Comment s'assurer qu'un champ de formulaire <select> est soumis lorsqu'il est désactivé?

J'ai un selectchamp de formulaire que je veux marquer comme "lecture seule", car l'utilisateur ne peut pas modifier la valeur, mais la valeur est toujours soumise avec le formulaire. L'utilisation de l' disabledattribut empêche l'utilisateur de modifier la valeur, mais ne soumet pas la valeur avec le formulaire.

L' readonlyattribut n'est disponible que pour les champs inputet textarea, mais c'est essentiellement ce que je veux. Y a-t-il un moyen de faire fonctionner cela?

Deux possibilités que j'envisage incluent:

• Au lieu de désactiver le select, désactivez tous les options et utilisez CSS pour griser la sélection afin qu'elle semble désactivée.
• Ajoutez un gestionnaire d'événements de clic au bouton d'envoi afin qu'il active tous les menus déroulants désactivés avant de soumettre le formulaire.

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

Où select_nameest le nom que vous donneriez normalement au fichier <select>.

Une autre option.

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

Maintenant, avec celui-ci, j'ai remarqué que selon le serveur Web que vous utilisez, vous devrez peut-être mettre l' hiddenentrée avant ou après le <select>.

Si ma mémoire me sert correctement, avec IIS, vous le mettez avant, avec Apache vous le mettez après. Comme toujours, les tests sont essentiels.

Désactivez les champs, puis activez-les avant l'envoi du formulaire:

Code jQuery:

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

J'ai cherché une solution pour cela, et comme je n'ai pas trouvé de solution dans ce fil, j'ai fait la mienne.

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

Simple, vous floutez simplement le champ lorsque vous vous concentrez dessus, quelque chose comme le désactiver, mais vous envoyez en fait ses données.

J'ai été confronté à un scénario légèrement différent, en ce sens que je voulais seulement ne pas permettre à l'utilisateur de modifier la valeur sélectionnée en fonction d'une boîte de sélection antérieure. Ce que j'ai fini par faire, c'est simplement désactiver toutes les autres options non sélectionnées dans la boîte de sélection en utilisant

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

Même solution suggérée par Tres sans utiliser 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>

Cela peut aider quelqu'un à mieux comprendre, mais est évidemment moins flexible que celui de jQuery.

il ne fonctionne pas avec le: sélecteur d'entrée pour les champs sélectionnés, utilisez ceci:

    jQuery(function() {

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

    });

J'utilise le code suivant pour désactiver les options dans les sélections

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

Le moyen le plus simple que j'ai trouvé était de créer une minuscule fonction javascript liée à votre formulaire:

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

et vous l'appelez dans votre formulaire ici:

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

Ou vous pouvez l'appeler dans la fonction que vous utilisez pour vérifier votre formulaire :)

Ajoutez simplement une ligne avant de soumettre.

$ ("# XYZ"). RemoveAttr ("désactivé");

Ou utilisez du JavaScript pour changer le nom de la sélection et la désactiver. De cette façon, la sélection est toujours soumise, mais en utilisant un nom que vous ne vérifiez pas.

J'ai créé un plugin rapide (Jquery uniquement), qui enregistre la valeur dans un champ de données lorsqu'une entrée est désactivée. Cela signifie simplement que tant que le champ est désactivé par programmation via jquery en utilisant .prop () ou .attr () ... alors accéder à la valeur par .val (), .serialize () ou .serializeArra () retournera toujours le valeur même si désactivé :)

Prise sans vergogne: https://github.com/Jezternz/jq-disabled-inputs

Sur la base de la solution de la Jordanie, j'ai créé une fonction qui crée automatiquement une entrée masquée avec le même nom et la même valeur de la sélection que vous souhaitez invalider. Le premier paramètre peut être un id ou un élément jquery; le second est un paramètre optionnel booléen où "true" désactive et "false" active l'entrée. S'il est omis, le deuxième paramètre commute la sélection entre «activé» et «désactivé».

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

J'ai trouvé une solution viable: supprimez tous les éléments sauf celui sélectionné. Vous pouvez ensuite changer le style en quelque chose qui semble également désactivé. Utilisation de 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");
}

Une autre option consiste à utiliser l'attribut readonly.

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

En lecture seule, la valeur est toujours soumise, le champ de saisie est grisé et l'utilisateur ne peut pas le modifier.

Éditer:

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

• Les éléments en lecture seule reçoivent le focus mais ne peuvent pas être modifiés par l'utilisateur.
• Les éléments en lecture seule sont inclus dans la navigation par tabulation.
• Les éléments en lecture seule peuvent réussir.

Quand il dit que l'élément peut réussir, cela signifie qu'il peut être soumis, comme indiqué ici: http://www.w3.org/TR/html401/interact/forms.html#successful-controls