J'utilise la déclaration suivante pour le rendre en lecture seule mais cela ne fonctionne pas.

$('#cf_1268591').attr("readonly", "readonly"); 

Je ne veux pas le désactiver, je veux le rendre en lecture seule.

$('#cf_1268591').attr("disabled", true); 

le menu déroulant est toujours en lecture seule. ce que vous pouvez faire est de le désactiver

si vous travaillez avec un formulaire, les champs désactivés ne sont pas soumis, utilisez donc un champ masqué pour stocker la valeur de liste déroulante désactivée

J'ai eu le même problème, ma solution était de désactiver toutes les options non sélectionnées. Très facile avec jQuery:

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

Edit => Si vous avez plusieurs listes déroulantes sur la même page, désactivez toutes les options non sélectionnées sur select-ID comme ci-dessous.

$('#select_field_id option:not(:selected)').attr('disabled', true);

Essayez celui-ci .. sans désactiver la valeur sélectionnée.

$('#cf_1268591 option:not(:selected)').prop('disabled', true);

Ça marche pour moi..

Voici ce que vous recherchez:

$('#cf_1268591').attr("style", "pointer-events: none;");

Fonctionne comme un charme.

La définition d'un élément avec disabledne soumettra pas les données, mais les selectéléments n'en ont pas readonly.

Vous pouvez simuler un readonlysur l' selectutilisation de CSS pour le style et JS pour empêcher le changement avec onglet:

select[readonly] {
  background: #eee;
  pointer-events: none;
  touch-action: none;
}

Ensuite, utilisez-le comme:

var readonly_select = $('select');
$(readonly_select).attr('readonly', true).attr('data-original-value', $(readonly_select).val()).on('change', function(i) {
    $(i.target).val($(this).attr('data-original-value'));
});

Résultat:

  // Updated 08/2018 to prevent changing value with tab
$('a').on('click', function() {
var readonly_select = $('select');
$(readonly_select).attr('readonly', true).attr('data-original-value', $(readonly_select).val()).on('change', function(i) {
	$(i.target).val($(this).attr('data-original-value'));
});
});

select[readonly] {
  background: #eee;
  pointer-events: none;
  touch-action: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">Click here to enable readonly</a>
<select>
<option>Example 1</option>
<option selected>Example 2</option>
<option>Example 3</option>
</select>

Je rendrais le champ désactivé. Ensuite, lorsque le formulaire est soumis, désactivez-le. À mon avis, c'est plus facile que d'avoir à gérer des champs cachés.

//disable the field
$("#myFieldID").prop( "disabled", true );           

//right before the form submits, we re-enable the fields, to make them submit.
$( "#myFormID" ).submit(function( event ) {
    $("#myFieldID").prop( "disabled", false );
});     

Jquery simple pour supprimer les options non sélectionnées.

$('#your_dropdown_id option:not(:selected)').remove();

Pour simplifier les choses, voici un plugin jQuery qui fait cela sans tracas: https://github.com/haggen/readonly

Cette ligne effectue des sélections avec l' readonlyattribut en lecture seule:

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

Ce code stockera d'abord la sélection d'origine dans chaque liste déroulante. Ensuite, si l'utilisateur modifie la sélection, il réinitialisera la liste déroulante à sa sélection d'origine.

http://jsfiddle.net/4aHcD/22/

//store the original selection
$("select :selected").each(function(){
    $(this).parent().data("default", this);
});

//change the selction back to the original
$("select").change(function(e) {
    $($(this).data("default")).prop("selected", true);
});

L'option la plus simple pour moi était de sélectionner en lecture seule et d'ajouter:

onmousedown="return false" onkeydown="return false"

Vous n'avez pas besoin d'écrire de logique supplémentaire. Aucune entrée masquée ou désactivée puis réactivée lors de l'envoi du formulaire.

C'est un vieil article, mais je veux avertir les gens qui le trouveront. Soyez prudent avec l'attribut désactivé avec l'élément obtenu par nom. Étrange mais cela ne semble pas trop travailler.

cela ne fonctionne pas:

<script language="JavaScript">
function onChangeFullpageCheckbox() {    
$('name=img_size').attr("disabled",$("#fullpage").attr("checked"));
</script>

ce travail:

<script language="JavaScript">
function onChangeFullpageCheckbox() {    
$('#img_size').attr("disabled",$("#fullpage").attr("checked"));
</script>

Oui, je sais que je devrais mieux utiliser prop et non attr, mais au moins maintenant, prop ne fonctionnera pas à cause de l'ancienne version de jquery, et maintenant je ne peux pas le mettre à jour, ne demandez pas pourquoi ... la différence html est seulement ajoutée id:. ..

<select name="img_size" class="dropDown" id="img_size">
<option value="200">200px
</option><option value="300">300px
</option><option value="400">400px
</option><option value="500">500px
</option><option value="600" selected="">600px
</option><option value="800">800px
</option><option value="900">900px
</option><option value="1024">1024px
</option></select>

<input type="checkbox" name="fullpage" id="fullpage" onChange="onChangeFullpageCheckbox()" />

...

Je n'ai trouvé aucune erreur dans le script, et dans la version avec nom, il n'y avait aucune erreur dans la console. Mais bien sûr, cela peut être mon erreur de code

Vu sur: Chrome 26 sur Win 7 Pro

Désolé pour la mauvaise grammaire.

J'ai trouvé qu'une meilleure façon de le faire est d'utiliser CSS pour supprimer les événements de pointeur et modifier l'opacité dans la liste déroulante (essayez 0.5). Cela donne l'impression à l'utilisateur qu'il est désactivé normalement, mais qu'il publie toujours des données.

Certes, cela pose quelques problèmes de compatibilité ascendante, mais c'est à mon avis une meilleure option que de contourner le problème ennuyeux de la désactivation / lecture seule.

Vous pouvez également le désactiver et au moment où vous effectuez l'appel de soumission, activez-le. Je pense que c'est le moyen le plus simple :)

Ça marche très bien

$('#cf_1268591 option:not(:selected)').prop('disabled', true);

Avec cela, je peux voir les options mais je ne peux pas les sélectionner

Il n'existe pas de liste déroulante en lecture seule. Ce que vous pouvez faire est de le réinitialiser manuellement à la première valeur après chaque modification.

$("select").change(function(event) {
    $(this).val($(this).find("option").first().val());
});

http://jsfiddle.net/4aHcD/

Essayez de créer une chaîne vide lorsque vous appuyez sur la touche

Le Html est:

<input id="cf_1268591" style="width:60px;line-height:16px;border:1px solid #ccc">

Le Jquery est:

$("#cf_1268591").combobox({
  url:"your url",
  valueField:"id",
  textField:"text",
  panelWidth: "350",
  panelHeight: "200",
});

// faire après keyup avec une chaîne vide

var tb = $("#cf_1268591").combobox("textbox");
  tb.bind("keyup",function(e){
  this.value = "";
});

Peut-être que tu peux essayer de cette façon

function myFunction()
{
   $("select[id^=myID]").attr("disabled", true);
   var txtSelect = $("select[id^=myID] option[selected]").text();
}

Cela définit la première valeur de la liste déroulante comme valeur par défaut et cela semble en lecture seule

html5 prenant en charge:

`
     $("#cCity").attr("disabled", "disabled"); 
     $("#cCity").addClass('not-allow');

»

Voici une légère variation sur les autres réponses qui suggèrent d'utiliser désactivé. Puisque l'attribut "disabled" peut en fait avoir n'importe quelle valeur et être toujours désactivé, vous pouvez le définir sur readonly, comme disabled = "readonly". Cela désactivera le contrôle comme d'habitude et vous permettra également de le styliser facilement différemment des contrôles désactivés normaux, avec des CSS comme:

select[disabled=readonly] {
    .... styles you like for read-only
}

Si vous voulez que les données soient incluses, soumettez, utilisez les champs masqués ou activez avant de soumettre, comme détaillé dans les autres réponses.

Comme l'a dit @Kanishka, si nous désactivons un élément de formulaire, il ne sera pas soumis. J'ai créé un extrait pour ce problème. Lorsque l'élément de sélection est désactivé, il crée un champ d'entrée masqué et stocke la valeur. Lorsqu'elle est activée, elle supprime les champs de saisie masqués créés.

Plus d'informations

jQuery(document).ready(function($) {
  var $dropDown = $('#my-select'),
    name = $dropDown.prop('name'),
    $form = $dropDown.parent('form');

  $dropDown.data('original-name', name); //store the name in the data attribute 

  $('#toggle').on('click', function(event) {
    if ($dropDown.is('.disabled')) {
      //enable it 
      $form.find('input[type="hidden"][name=' + name + ']').remove(); // remove the hidden fields if any
      $dropDown.removeClass('disabled') //remove disable class 
        .prop({
          name: name,
          disabled: false
        }); //restore the name and enable 
    } else {
      //disable it 
      var $hiddenInput = $('<input/>', {
        type: 'hidden',
        name: name,
        value: $dropDown.val()
      });
      $form.append($hiddenInput); //append the hidden field with same name and value from the dropdown field 
      $dropDown.addClass('disabled') //disable class
        .prop({
          'name': name + "_1",
          disabled: true
        }); //change name and disbale 
    }
  });
});

/*Optional*/

select.disabled {
  color: graytext;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="#" name="my-form">
  <select id="my-select" name="alpha">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
  </select>
</form>
<br/>
<button id="toggle">toggle enable/disable</button>