Sto usando la seguente dichiarazione per renderlo di sola lettura ma non funziona.

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

Non voglio renderlo disabilitato, voglio renderlo di sola lettura.

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

il menu a discesa è sempre di sola lettura. quello che puoi fare è renderlo disabilitato

se lavori con un modulo, i campi disabilitati non vengono inviati, quindi utilizza un campo nascosto per memorizzare il valore a discesa disabilitato

Ho avuto lo stesso problema, la mia soluzione era disabilitare tutte le opzioni non selezionate. Molto facile con jQuery:

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

Modifica => Se hai più menu a discesa sulla stessa pagina, disabilita tutte le opzioni non selezionate su select-ID come di seguito.

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

Prova questo .. senza disabilitare il valore selezionato ..

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

Per me funziona..

Questo e ciò che stai cercando:

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

Funziona come un fascino.

L'impostazione di un elemento con disablednon invierà i dati, tuttavia gli selectelementi non lo hanno readonly.

È possibile simulare readonlyl' selectutilizzo di CSS per lo stile e JS per impedire modifiche con tab:

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

Quindi usalo come:

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

Risultato:

  // 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>

Disabiliterei il campo. Quindi, quando il modulo viene inviato, rendilo non disabilitato. Secondo me, questo è più facile che avere a che fare con campi nascosti.

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

Semplice jquery per rimuovere le opzioni non selezionate.

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

Per semplificare le cose ecco un plugin jQuery che lo fa senza problemi: https://github.com/haggen/readonly

Questa riga effettua selezioni con l' readonlyattributo di sola lettura:

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

Questo codice memorizzerà prima la selezione originale in ogni menu a discesa. Quindi, se l'utente modifica la selezione, ripristinerà il menu a discesa sulla selezione originale.

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'opzione più semplice per me era selezionare come sola lettura e aggiungere:

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

Non è necessario scrivere alcuna logica aggiuntiva. Nessun input nascosto o disabilitato e quindi riabilitato all'invio del modulo.

È un vecchio articolo, ma voglio avvisare le persone che lo troveranno. Fai attenzione con l'attributo disabilitato con l'elemento ottenuto per nome. Strano ma sembra non funzionare troppo.

questo non funziona:

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

questo lavoro:

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

Sì, so che dovrei usare meglio prop e non attr, ma almeno ora prop non funzionerà a causa della vecchia versione di jquery, e ora non posso aggiornarlo, non chiedere perché ... la differenza html viene aggiunta solo 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()" />

...

Non ho trovato errori nello script e nella versione con nome non c'erano errori in console. Ma naturalmente può essere un mio errore nel codice

Visto su: Chrome 26 su Win 7 Pro

Scusa per la cattiva grammatica.

Ho scoperto che un modo migliore per farlo è usare i CSS per rimuovere gli eventi del puntatore e modificare l'opacità nel menu a discesa (prova 0.5). Questo dà l'impressione all'utente che sia disabilitato normalmente, ma invii comunque i dati.

Certo, questo ha alcuni problemi con la retrocompatibilità, ma a mio parere è un'opzione migliore rispetto a aggirare il fastidioso problema di disabilitazione / sola lettura.

Puoi anche disabilitarlo e nel momento in cui effettui l'invio della chiamata abilitalo. Penso che sia il modo più semplice :)

Funziona molto bene

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

Con questo posso vedere le opzioni ma non posso selezionarlo

Non esiste un menu a discesa di sola lettura. Quello che potresti fare è reimpostarlo manualmente al primo valore dopo ogni modifica.

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

http://jsfiddle.net/4aHcD/

Prova a creare una stringa vuota quando "premi il tasto"

L'Html è:

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

Il Jquery è:

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

// crea dopo keyup con una stringa vuota

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

Forse puoi provare in questo modo

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

Questo imposta il primo valore dell'elenco a discesa come predefinito e sembra di sola lettura

supporto html5:

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

"

Ecco una leggera variazione rispetto alle altre risposte che suggeriscono l'utilizzo di disabili. Dato che l'attributo "disabled" può effettivamente avere qualsiasi valore e comunque disabilitare, puoi impostarlo su readonly, come disabled = "readonly". Questo disabiliterà il controllo come al solito e ti permetterà anche di modellarlo facilmente in modo diverso dai normali controlli disabilitati, con CSS come:

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

Se desideri che i dati vengano inclusi, invia, utilizza i campi nascosti o abilita prima dell'invio, come spiegato in dettaglio nelle altre risposte.

Come ha detto @Kanishka, se disabilitiamo un elemento del modulo non verrà inviato. Ho creato uno snippet per questo problema. Quando l'elemento select è disabilitato, crea un campo di input nascosto e memorizza il valore. Quando è abilitato, elimina i campi di input nascosti creati.

Ulteriori informazioni

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>