Question Formulaire HTML en lecture seule SELECT tag / input


Selon les spécifications HTML, le select tag en HTML n'a pas de readonly attribut, seulement un disabled attribut. Donc, si vous voulez empêcher l'utilisateur de modifier le menu déroulant, vous devez utiliser disabled.

Le seul problème est que les entrées de formulaire HTML désactivées ne sont pas incluses dans les données POST / GET.

Quelle est la meilleure façon d'émuler le readonly attribut pour un select tag, et toujours obtenir les données POST?


445
2017-12-15 15:59


origine


Réponses:


Vous devriez garder le select élément disabled mais aussi ajouter un autre caché input 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 et désactiver (ou supprimer) l'entrée masquée.

Voici une démo:

$('#mainform').submit(function() {
    $('#formdata_container').show();
    $('#formdata').html($(this).serialize());
    return false;
});

$('#enableselect').click(function() {
    $('#mainform input[name=animal]')
        .attr("disabled", true);
    
    $('#animal-select')
        .attr('disabled', false)
    	.attr('name', 'animal');
    
    $('#enableselect').hide();
    return false;
});
#formdata_container {
    padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <form id="mainform">
        <select id="animal-select" disabled="true">
            <option value="cat" selected>Cat</option>
            <option value="dog">Dog</option>
            <option value="hamster">Hamster</option>
        </select>
        <input type="hidden" name="animal" value="cat"/>
        <button id="enableselect">Enable</button>
        
        <select name="color">
            <option value="blue" selected>Blue</option>
            <option value="green">Green</option>
            <option value="red">Red</option>
        </select>

        <input type="submit"/>
    </form>
</div>

<div id="formdata_container" style="display:none">
    <div>Submitted data:</div>
    <div id="formdata">
    </div>
</div>


376
2017-12-15 16:03



Nous pourrions aussi utiliser cette

Désactiver tout sauf l'option sélectionnée:

<select>
<option disabled="disabled">1</option>
<option selected="selected">2</option>
<option disabled="disabled">3</option>
</select>

De cette façon, la liste déroulante fonctionne toujours (et soumet sa valeur) mais l'utilisateur ne peut pas sélectionner une autre valeur.

Démo


114
2018-05-02 13:03



Vous pouvez réactiver l'objet select sur submit.

MODIFIER: c'est-à-dire, désactivant normalement la balise de sélection (avec l'attribut désactivé), puis la réactivant automatiquement juste avant de soumettre le formulaire:

Exemple avec jQuery:

  • Pour le désactiver:

    $('#yourSelect').prop('disabled', true);
    
  • Pour le réactiver avant la soumission afin que les données GET / POST soient incluses:

    $('#yourForm').on('submit', function() {
        $('#yourSelect').prop('disabled', false);
    });
    

En outre, vous pouvez réactiver toutes les entrées désactivées ou sélectionner:

$('#yourForm').on('submit', function() {
    $('input, select').prop('disabled', false);
});

92
2017-12-15 16:00



<select id="countries" onfocus="this.defaultIndex=this.selectedIndex;" onchange="this.selectedIndex=this.defaultIndex;">
<option value="1">Country1</option>
<option value="2">Country2</option>
<option value="3">Country3</option>
<option value="4">Country4</option>
<option value="5">Country5</option>
<option value="6">Country6</option>
<option value="7" selected="selected">Country7</option>
<option value="8">Country8</option>
<option value="9">Country9</option>
</select>

Testé et fonctionnant dans IE 6, 7 et 8b2, Firefox 2 et 3, Opera 9.62, Safari 3.2.1 pour Windows et Google Chrome.


37
2017-12-15 16:04



une autre façon de faire un readOnly attribuer à un select l'élément est en utilisant css

vous pourriez faire comme:

$('#selection').css('pointer-events','none');

DEMO


37
2017-08-15 05:32



Solution jQuery simple

jQuery('select.readonly option:not(:selected)').attr('disabled',true);

30
2018-05-11 23:55



Solution CSS simple:

select[readonly]{
    background: #eee;
    cursor:no-drop;
}

select[readonly] option{
    display:none;
}

Il en résulte que Select est gris avec un joli curseur "disable" au survol
et sur sélectionnez la liste d'options est "vide" de sorte que vous ne pouvez pas changer sa valeur.


19
2017-08-07 16:07