Estou usando a instrução a seguir para torná-la somente leitura, mas não está funcionando.

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

Eu não quero desativá-lo, quero torná-lo somente leitura.

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

drop down é sempre somente leitura. o que você pode fazer é desativá-lo

se você trabalha com um formulário, os campos desabilitados não são enviados, então use um campo oculto para armazenar o valor da lista suspensa desabilitada

Tive o mesmo problema, minha solução foi desabilitar todas as opções não selecionadas. Muito fácil com jQuery:

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

Editar => Se você tiver vários menus suspensos na mesma página, desative todas as opções não selecionadas em select-ID conforme abaixo.

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

Experimente este .. sem desabilitar o valor selecionado ..

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

Funciona para mim..

Isso é o que você está procurando:

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

Funciona como um encanto.

Definir um elemento com disablednão enviará os dados, mas os selectelementos não readonly.

Você pode simular um readonlyem selectusar CSS para estilizar e JS para evitar a mudança com guia:

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

Em seguida, use-o como:

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

Resultado:

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

Eu desativaria o campo. Então, quando o formulário for enviado, faça com que ele não seja desativado. Na minha opinião, isso é mais fácil do que lidar com campos ocultos.

//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 simples para remover opções não selecionadas.

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

Para simplificar as coisas, aqui está um plugin jQuery que faz isso sem complicações: https://github.com/haggen/readonly

Esta linha faz seleções com o readonlyatributo somente leitura:

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

Este código armazenará primeiro a seleção original em cada menu suspenso. Então, se o usuário alterar a seleção, ele redefinirá o menu suspenso para sua seleção original.

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

A opção mais fácil para mim foi selecionar como somente leitura e adicionar:

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

Você não precisa escrever nenhuma lógica extra. Sem entradas ocultas ou desativado e reativado no envio do formulário.

É um artigo antigo, mas quero alertar as pessoas que irão encontrá-lo. Tenha cuidado com o atributo desativado com elemento obtido por nome. Estranho, mas parece não funcionar muito.

isso não funciona:

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

Este trabalho:

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

Sim, eu sei que é melhor eu usar prop e não attr, mas pelo menos agora prop não funcionará por causa da versão antiga do jquery, e agora não posso atualizá-lo, não pergunte por quê ... a diferença de html é apenas adicionada 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()" />

...

Não encontrei erros no script, e na versão com nome não houve erros no console. Mas é claro que pode ser meu erro no código

Visto em: Chrome 26 no Win 7 Pro

Desculpe pela gramática ruim.

Descobri que a melhor maneira de fazer isso é usar CSS para remover eventos de ponteiro e modificar a opacidade no menu suspenso (tente 0,5). Isso dá a impressão ao usuário de que está desabilitado normalmente, mas ainda publica dados.

Concedido, isso tem alguns problemas de compatibilidade com versões anteriores, mas na minha opinião é uma opção melhor do que contornar o problema irritante de desabilitar / somente leitura.

Você também pode desativá-lo e, no momento em que fizer a chamada de envio, ativá-lo. Acho que é a maneira mais fácil :)

Funciona muito bem

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

Com isso eu posso ver as opções, mas não consigo selecioná-las

Não existe uma lista suspensa somente leitura. O que você pode fazer é redefini-lo para o primeiro valor manualmente após cada alteração.

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

http://jsfiddle.net/4aHcD/

Tente fazer uma string vazia ao "pressionar a tecla"

O Html é:

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

O Jquery é:

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

// faça após a ativação com string vazia

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

Talvez você possa tentar desta forma

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

Isso define o primeiro valor do menu suspenso como o padrão e parece somente leitura

suporte a html5:

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

`

Aqui está uma ligeira variação nas outras respostas que sugerem o uso de desativado. Como o atributo "disabled" pode ter qualquer valor e ainda assim ser desativado, você pode defini-lo como somente leitura, como disabled = "somente leitura". Isso desabilitará o controle, como de costume, e também permitirá que você facilmente estilize-o de forma diferente dos controles desabilitados regulares, com CSS como:

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

Se você deseja que os dados sejam incluídos no envio, use os campos ocultos ou habilite antes de enviar, conforme detalhado nas outras respostas.

Como @Kanishka disse, se desativarmos um elemento do formulário, ele não será enviado. Eu criei um snippet para este problema. Quando o elemento de seleção está desativado, ele cria um campo de entrada oculto e armazena o valor. Quando está ativado, ele exclui os campos de entrada ocultos criados.

Mais informações

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>