Estoy usando la siguiente declaración para que sea de solo lectura, pero no funciona.

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

No quiero desactivarlo, quiero que sea de solo lectura.

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

El menú desplegable siempre es de solo lectura. lo que puedes hacer es desactivarlo

si trabaja con un formulario, los campos deshabilitados no se envían, así que use un campo oculto para almacenar el valor desplegable deshabilitado

Tuve el mismo problema, mi solución fue deshabilitar todas las opciones no seleccionadas. Muy fácil con jQuery:

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

Editar => Si tiene varios menús desplegables en la misma página, deshabilite todas las opciones no seleccionadas en el ID de selección como se muestra a continuación.

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

Pruebe este ... sin deshabilitar el valor seleccionado ...

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

Esto funciona para mi..

Esto es lo que busca:

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

Funciona de maravilla.

Establecer un elemento con disabledno enviará los datos, sin embargo, los selectelementos no lo tienen readonly.

Se puede simular un readonlysobre selectel uso de CSS para estilizar y JS para evitar el cambio de pestaña:

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

Entonces úsalo 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>

Inhabilitaría el campo. Luego, cuando se envíe el formulario, desactívelo. En mi opinión, esto es más fácil que tener que lidiar con 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 simple para eliminar las opciones no seleccionadas.

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

Para simplificar las cosas, aquí hay un complemento de jQuery que lo hace sin problemas: https://github.com/haggen/readonly

Esta línea hace selecciones con el readonlyatributo de solo lectura:

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

Este código almacenará primero la selección original en cada menú desplegable. Luego, si el usuario cambia la selección, restablecerá el menú desplegable a su selección 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);
});

La opción más fácil para mí fue seleccionar como de solo lectura y agregar:

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

No es necesario escribir ninguna lógica adicional. No hay entradas ocultas o deshabilitadas y luego se vuelven a habilitar al enviar el formulario.

Es un artículo antiguo, pero quiero advertir a las personas que lo encontrarán. Tenga cuidado con el atributo deshabilitado con el elemento obtenido por nombre. Extraño, pero parece que no funciona demasiado.

esto no funciona:

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

este trabajo:

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

Sí, sé que debería usar prop y no attr, pero al menos ahora prop no funcionará debido a la versión anterior de jquery, y ahora no puedo actualizarlo, no preguntes por qué ... la diferencia html solo se agrega 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()" />

...

No he encontrado ningún error en el script, y en la versión con nombre no hubo errores en la consola. Pero, por supuesto, puede ser mi error de código.

Visto en: Chrome 26 en Win 7 Pro

Perdón por la mala gramática.

Descubrí que una mejor manera de hacer esto es usar CSS para eliminar eventos de puntero y modificar la opacidad en el menú desplegable (intente 0.5). Esto le da al usuario la apariencia de que está deshabilitado normalmente, pero aún publica datos.

De acuerdo, esto tiene algunos problemas con la compatibilidad con versiones anteriores, pero en mi opinión, es una mejor opción que solucionar el molesto problema de deshabilitación / solo lectura.

También puede deshabilitarlo y en el momento en que realiza la llamada de envío habilitarlo. Creo que es la forma más fácil :)

Funciona muy bien

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

Con esto puedo ver las opciones pero no puedo seleccionarlo

No existe un menú desplegable de solo lectura. Lo que podría hacer es restablecerlo al primer valor manualmente después de cada cambio.

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

http://jsfiddle.net/4aHcD/

Intente hacer una cadena vacía cuando "presione la tecla"

El Html es:

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

El Jquery es:

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

// hacer después de keyup con cadena vacía

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

Tal vez puedas intentarlo de esta manera

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

Esto establece el primer valor del menú desplegable como predeterminado y parece de solo lectura

html5 compatible:

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

'

Aquí hay una ligera variación en las otras respuestas que sugieren usar discapacitados. Dado que el atributo "deshabilitado" puede tener cualquier valor y aún deshabilitarlo, puede configurarlo en solo lectura, como disabled = "readonly". Esto deshabilitará el control como de costumbre, y también le permitirá diseñarlo fácilmente de manera diferente a los controles deshabilitados normales, con CSS como:

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

Si desea que se incluyan datos, envíe, use campos ocultos o habilite antes de enviar, como se detalla en las otras respuestas.

Como dijo @Kanishka, si deshabilitamos un elemento de formulario, no se enviará. He creado un fragmento para este problema. Cuando el elemento de selección está deshabilitado, crea un campo de entrada oculto y almacena el valor. Cuando está habilitado, elimina los campos de entrada ocultos creados.

Más información

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>