Formulaire HTML en lecture seule SELECT / entrée

Selon les spécifications HTML, la selectbalise HTML n'a pas d' readonlyattribut, seulement un disabledattribut. Donc, si vous voulez empêcher l'utilisateur de modifier la liste déroulante, 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 l' readonlyattribut d'une selectbalise et d'obtenir toujours les données POST?

Vous devez conserver l' selectélément disabledmais également en ajouter un autre caché inputavec 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 dans 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>

On pourrait aussi utiliser ça

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

<select>
    <option disabled>1</option>
    <option selected>2</option>
    <option 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

Vous pouvez réactiver l'objet sélectionné lors de la soumission.

EDIT : 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);
  });

De plus, vous pouvez réactiver chaque entrée désactivée ou sélectionner:

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

une autre façon de faire un readOnlyattribut à un selectélément consiste à utilisercss

vous pourriez faire comme:

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

DEMO

<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 fonctionne sous IE 6, 7 et 8b2, Firefox 2 et 3, Opera 9.62, Safari 3.2.1 pour Windows et Google Chrome.

Solution jQuery simple

Utilisez-le si vos sélections ont la readonlyclasse

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

Ou ceci si vos sélections ont l' readonly="readonly"attribut

$('select[readonly="readonly"] option:not(:selected)').attr('disabled',true);

Solution CSS simple:

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

select[readonly] option{
    display:none;
}

Cela se traduit par Sélectionner pour être gris avec un joli curseur "désactiver" au survol
et sur sélectionner la liste des options est "vide" afin que vous ne puissiez pas changer sa valeur.

Encore une autre option plus contemporaine (sans jeu de mots) consiste à désactiver toutes les options de l'élément de sélection autre que l'élément sélectionné.

notez cependant qu'il s'agit d'une fonctionnalité HTML 4.0 et que 6,7,8 beta 1 semblent ne pas respecter cela.

http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/OptionDisabledSupport.html

C'est la meilleure solution que j'ai trouvée:

$("#YourSELECTIdHere option:not(:selected)").prop("disabled", true);

Le code ci-dessus désactive toutes les autres options non sélectionnées tout en conservant l'option sélectionnée activée. Ce faisant, l'option sélectionnée sera intégrée dans les données post-back.

Je sais qu'il est beaucoup trop tard, mais cela peut être fait avec du CSS simple:

select[readonly] option, select[readonly] optgroup {
    display: none;
}

Le style masque toutes les options et les groupes lorsque la sélection est en readonlyétat, de sorte que l'utilisateur ne peut pas modifier sa sélection.

Aucun piratage JavaScript n'est nécessaire.

Plus simple encore: ajoutez l'attribut style à votre balise de sélection :

style="pointer-events: none;"

C'est la solution la plus simple et la meilleure. Vous définissez un attr readolny sur votre sélection, ou tout autre attr comme data-readonly, et procédez comme suit

$("select[readonly]").live("focus mousedown mouseup click",function(e){
    e.preventDefault();
    e.stopPropagation();
});

Définissez la sélection désactivée lorsque vous prévoyez qu'elle soit en lecture seule, puis supprimez l'attribut désactivé juste avant de soumettre le formulaire.

// global variable to store original event/handler for save button
var form_save_button_func = null;

// function to get jQuery object for save button
function get_form_button_by_id(button_id) {
    return jQuery("input[type=button]#"+button_id);
}

// alter value of disabled element
function set_disabled_elem_value(elem_id, value)  {
    jQuery("#"+elem_id).removeAttr("disabled");
    jQuery("#"+elem_id).val(value);
    jQuery("#"+elem_id).attr('disabled','disabled');
}

function set_form_bottom_button_save_custom_code_generic(msg) {
    // save original event/handler that was either declared
    // through javascript or html onclick attribute
    // in a global variable
    form_save_button_func = get_form_button_by_id('BtnSave').prop('onclick'); // jQuery 1.6
    //form_save_button_func = get_form_button_by_id('BtnSave').prop('onclick'); // jQuery 1.7

    // unbind original event/handler (can use any of following statements below)
    get_form_button_by_value('BtnSave').unbind('click');
    get_form_button_by_value('BtnSave').removeAttr('onclick');

    // alternate save code which also calls original event/handler stored in global variable
    get_form_button_by_value('BtnSave').click(function(event){
        event.preventDefault();
        var confirm_result = confirm(msg);
        if (confirm_result) {
            if (jQuery("form.anyForm").find('input[type=text], textarea, select').filter(".disabled-form-elem").length > 0) {
                jQuery("form.anyForm").find('input[type=text], textarea, select').filter(".disabled-form-elem").removeAttr("disabled");
            }

            // disallow further editing of fields once save operation is underway
            // by making them readonly
            // you can also disallow form editing by showing a large transparent
            // div over form such as loading animation with "Saving" message text
            jQuery("form.anyForm").find('input[type=text], textarea, select').attr('ReadOnly','True');

            // now execute original event/handler
            form_save_button_func();
        }
    });
}

$(document).ready(function() {
    // if you want to define save button code in javascript then define it now

    // code below for record update
    set_form_bottom_button_save_custom_code_generic("Do you really want to update this record?");
    // code below for new record
    //set_form_bottom_button_save_custom_code_generic("Do you really want to create this new record?");

    // start disabling elements on form load by also adding a class to identify disabled elements
    jQuery("input[type=text]#phone").addClass('disabled-form-elem').attr('disabled','disabled');
    jQuery("input[type=text]#fax").addClass('disabled-form-elem').attr('disabled','disabled');
    jQuery("select#country").addClass('disabled-form-elem').attr('disabled','disabled');
    jQuery("textarea#address").addClass('disabled-form-elem').attr('disabled','disabled');

    set_disabled_elem_value('phone', '123121231');
    set_disabled_elem_value('fax', '123123123');
    set_disabled_elem_value('country', 'Pakistan');
    set_disabled_elem_value('address', 'address');

}); // end of $(document).ready function

En plus de désactiver les options qui ne devraient pas être sélectionnables, je voulais en fait les faire disparaître de la liste, mais toujours pouvoir les activer en cas de besoin:

$("select[readonly]").find("option:not(:selected)").hide().attr("disabled",true);

Cela recherche tous les éléments de sélection avec un attribut en lecture seule, puis recherche toutes les options à l'intérieur des sélections qui ne sont pas sélectionnées, puis les masque et les désactive.

Il est important de séparer la requête jquery en 2 pour des raisons de performances, car jquery les lit de droite à gauche, le code:

$("select[readonly] option:not(:selected)")

trouvera d'abord toutes les options non sélectionnées dans le document, puis filtrera celles qui se trouvent à l'intérieur des sélections avec un attribut en lecture seule.

Une approche simple côté serveur consiste à supprimer toutes les options sauf celle que vous souhaitez sélectionner. Ainsi, dans Zend Framework 1.12, si $ element est un Zend_Form_Element_Select:

 $value =  $element->getValue();
 $options = $element->getAttrib('options');
 $sole_option = array($value => $options[$value]);
 $element->setAttrib('options', $sole_option);

Si vous désactivez un champ de formulaire, celui-ci ne sera pas envoyé lors de l'envoi du formulaire. Donc, si vous avez besoin d'un readonlyqui fonctionne comme si vous disabledenvoyiez des valeurs, procédez comme suit:

Après toute modification des propriétés en lecture seule d'un élément.

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

$('select:not([readonly]) option').removeAttr('disabled');

Solution avec tabindex. Fonctionne avec des entrées de sélection mais aussi de texte.

Utilisez simplement une classe .disabled.

CSS:

.disabled {
    pointer-events:none; /* No cursor */
    background-color: #eee; /* Gray background */
}

JS:

$(".disabled").attr("tabindex", "-1");

HTML:

<select class="disabled">
    <option value="0">0</option>
</select>

<input type="text" class="disabled" />

Edit: Avec Internet Explorer, vous avez également besoin de ce JS:

$(document).on("mousedown", ".disabled", function (e) {
    e.preventDefault();
});

À la suite de la suggestion de Grant Wagners; voici un extrait jQuery qui le fait avec des fonctions de gestionnaire au lieu d'attributs onXXX directs:

var readonlySelect = function(selector, makeReadonly) {

    $(selector).filter("select").each(function(i){
        var select = $(this);

        //remove any existing readonly handler
        if(this.readonlyFn) select.unbind("change", this.readonlyFn);
        if(this.readonlyIndex) this.readonlyIndex = null;

        if(makeReadonly) {
            this.readonlyIndex = this.selectedIndex;
            this.readonlyFn = function(){
                this.selectedIndex = this.readonlyIndex;
            };
            select.bind("change", this.readonlyFn);
        }
    });

};

Je l'ai résolu avec jquery:

      $("select.myselect").bind("focus", function(){
        if($(this).hasClass('readonly'))
        {
          $(this).blur();   
          return;
        }
      });

Si vous utilisez jquery validate, vous pouvez faire ce qui suit ci-dessous, j'ai utilisé l'attribut désactivé sans problème:

$(function(){
    $('#myform').validate({
        submitHandler:function(form){
            $('select').removeAttr('disabled');
            form.submit();
        }
    });
});

Ce que j'ai trouvé fonctionne très bien, avec du javascript simple (c'est-à-dire: aucune bibliothèque JQuery requise), c'est de changer le innerHTML de la <select>balise en la valeur restante unique souhaitée.

Avant:

<select name='day' id='day'>
  <option>SUN</option>
  <option>MON</option>
  <option>TUE</option>
  <option>WED</option>
  <option>THU</option>
  <option>FRI</option>
  <option>SAT</option>
</select>

Exemple de Javascript:

document.getElementById('day').innerHTML = '<option>FRI</option>';

Après:

<select name='day' id='day'>
  <option>FRI</option>
</select>

De cette façon, aucun changement d'effet visuel, et cela POST / GET dans le <FORM>.

Plutôt que la sélection elle-même, vous pouvez désactiver toutes les options à l'exception de l'option actuellement sélectionnée. Cela donne l'apparence d'une liste déroulante de travail, mais seule l'option que vous souhaitez transmettre est une sélection valide.

solution html:

<select onfocus="this.blur();">

celles en javascript:

selectElement.addEventListener("focus", selectElement.blur, true); selectElement.attachEvent("focus", selectElement.blur); //thanks, IE

ôter:

selectElement.removeEventListener("focus", selectElement.blur, true); selectElement.detachEvent("focus", selectElement.blur); //thanks, IE

modifier: ajout de méthodes de suppression

Supprimez simplement l'attribut désactivé avant d'envoyer le formulaire.

    $('form').submit(function () {
        $("#Id_Unidade").attr("disabled", false);
    });

<select id="case_reason" name="case_reason" disabled="disabled">

disabled="disabled" ->obtiendra votre valeur de la base de données et le montrera dans le formulaire. readonly="readonly" ->vous pouvez modifier votre valeur dans selectbox, mais votre valeur n'a pas pu être enregistrée dans votre base de données.

Si la liste déroulante de sélection est en lecture seule depuis la naissance et n'a pas besoin de changer du tout, peut-être devriez-vous utiliser un autre contrôle à la place? Comme un simple <div>(plus un champ de formulaire caché) ou un <input type="text">?

Ajouté: Si le menu déroulant n'est pas en lecture seule tout le temps et que JavaScript est utilisé pour l'activer / le désactiver, alors c'est toujours une solution - il suffit de modifier le DOM à la volée.

Ci-dessous a fonctionné pour moi:

$('select[name=country]').attr("disabled", "disabled"); 

Je l'ai réussi en cachant la case de sélection et en montrant un spanà sa place avec seulement une valeur informative. En cas de désactivation de la .readonlyclasse, nous devons également supprimer les .toVanishéléments et afficher .toShowceux-ci.

 $( '.readonly' ).live( 'focus', function(e) {
                $( this ).attr( 'readonly', 'readonly' )
                if( $( this ).get(0).tagName == 'SELECT' ) {
                    $( this ).before( '<span class="toVanish readonly" style="border:1px solid; padding:5px">' 
                            + $( this ).find( 'option:selected' ).html() + '</span>' )
                    $( this ).addClass( 'toShow' )
                    $( this ).hide()
            }
    });

Dans IE, j'ai pu vaincre l'approche onfocus => onblur en double-cliquant. Mais se souvenir de la valeur puis la restaurer dans l'événement onchange semble gérer ce problème.

<select onfocus="this.oldvalue=this.value;this.blur();" onchange="this.value=this.oldvalue;">
....
</select>

Vous pouvez faire de même sans propriétés expando en utilisant une variable javascript.

Voici une tentative d'utiliser une fonction jQuery personnalisée pour obtenir la fonctionnalité (comme mentionné ici):

$(function(){

 $.prototype.toggleDisable = function(flag) {
    // prepare some values
    var selectId = $(this).attr('id');
    var hiddenId = selectId + 'hidden';
    if (flag) {
      // disable the select - however this will not submit the value of the select
      // a new hidden form element will be created below to compensate for the 
      // non-submitted select value 
      $(this).attr('disabled', true);

      // gather attributes
      var selectVal = $(this).val();
      var selectName = $(this).attr('name');

      // creates a hidden form element to submit the value of the disabled select
      $(this).parents('form').append($('<input></input>').
        attr('type', 'hidden').
        attr('id', hiddenId).
        attr('name', selectName).
        val(selectVal) );
    } else {
      // remove the newly-created hidden form element
      $(this).parents('form').remove(hiddenId);
      // enable back the element
      $(this).removeAttr('disabled');
    }
  }

  // Usage
  // $('#some_select_element').toggleDisable(true);
  // $('#some_select_element').toggleDisable(false);

});