Salt okunur yapmak için aşağıdaki ifadeyi kullanıyorum ama çalışmıyor.

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

Devre dışı bırakmak istemiyorum, salt okunur yapmak istiyorum.

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

açılır menü her zaman salt okunurdur. yapabileceğin şey onu devre dışı bırakmaktır

bir formla çalışıyorsanız, devre dışı bırakılan alanlar gönderilmez, bu nedenle devre dışı bırakılan açılır liste değerini saklamak için gizli bir alan kullanın

Aynı sorunu yaşadım, çözümüm seçilmeyen tüm seçenekleri devre dışı bırakmaktı. JQuery ile çok kolay:

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

Düzenle => Aynı sayfada birden fazla açılır listeniz varsa, aşağıdaki gibi select-ID'de seçili olmayan tüm seçenekleri devre dışı bırakın.

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

Aradığınız şey bu:

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

Tıkır tıkır çalışıyor.

Bunu deneyin .. seçilen değeri devre dışı bırakmadan ..

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

Benim için çalışıyor ..

Bir öğenin ile ayarlanması disabledverileri göndermez, ancak selectöğelerde bulunmaz readonly.

Bir taklit edebilir readonlyüzerindeki selectsekme ile değişimi önlemek için stil ve JS için CSS kullanarak:

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

O zaman şu şekilde kullanın:

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

Sonuç:

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

Alanı devre dışı bırakırdım. Ardından, form gönderildiğinde devre dışı bırakmayın. Bence bu, gizli alanlarla uğraşmaktan daha kolay.

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

Seçili olmayan seçenekleri kaldırmak için basit jquery.

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

İşleri basitleştirmek için işte bunu sorunsuz bir şekilde yapan bir jQuery eklentisi: https://github.com/haggen/readonly

Bu satır, readonlysalt okunur özniteliğe sahip seçimleri yapar :

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

Bu kod ilk olarak her açılır menüde orijinal seçimi saklayacaktır. Ardından, kullanıcı seçimi değiştirirse, açılır menüyü orijinal seçimine sıfırlayacaktır.

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

Çok iyi çalışıyor

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

Bununla seçenekleri görebiliyorum ama seçemiyorum

Benim için en kolay seçenek salt okunur olarak seçim yapmak ve şunu eklemekti:

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

Ekstra mantık yazmanıza gerek yok. Gizli giriş yok veya devre dışı bırakılmadı ve ardından form gönderimi sırasında yeniden etkinleştirildi.

Eski bir makale ama onu bulacak insanları uyarmak istiyorum. İsme göre var öğesiyle devre dışı bırakılmış özniteliğe dikkat edin. Garip ama pek işe yaramıyor gibi görünüyor.

bu çalışmıyor:

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

bu iş:

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

Evet, attr yerine prop kullanmam gerektiğini biliyorum, ancak en azından şimdi jquery'nin eski sürümü nedeniyle prop çalışmayacak ve şimdi onu güncelleyemiyorum, nedenini sorma ... html farkı sadece 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()" />

...

Komut dosyasında herhangi bir hata bulamadım ve isimli versiyonda konsolda hata olmadı. Ama elbette kodda benim hatam olabilir

Görüntülenme: Win 7 Pro'da Chrome 26

Kötü gramer için özür dilerim.

Bunu yapmanın daha iyi bir yolu, işaretçi olaylarını kaldırmak ve açılır menüdeki opaklığı değiştirmek için CSS kullanmaktır (0.5'i deneyin). Bu, kullanıcıya normal olarak devre dışı bırakıldığı, ancak yine de verileri gönderdiği görünümü verir.

Bunun geriye dönük uyumlulukla ilgili bazı sorunları olduğunu kabul ettim, ancak bence can sıkıcı engelli / salt okunur sorununu aşmaktan daha iyi bir seçenek.

Ayrıca devre dışı bırakabilir ve gönderme çağrısını etkinleştirdiğiniz anda etkinleştirebilirsiniz. Bence en kolay yol :)

Salt okunur açılır menü diye bir şey yoktur. Yapabileceğiniz şey, her değişiklikten sonra manuel olarak ilk değere sıfırlamaktır.

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

http://jsfiddle.net/4aHcD/

"Tuşa basıldığında" boş dize yapmayı deneyin

Html:

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

Jquery:

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

// boş dizeyle anahtarlamadan sonra yap

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

Belki bu şekilde deneyebilirsin

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

Bu, açılır listenin ilk değerini varsayılan olarak ayarlar ve salt okunur görünür

html5 desteği:

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

'

İşte engelli kullanımını öneren diğer cevapların küçük bir varyasyonu. "Engelli" özniteliği aslında herhangi bir değere sahip olabileceği ve yine de devre dışı bırakılabileceği için, devre dışı = "salt okunur" gibi bunu salt okunur olarak ayarlayabilirsiniz. Bu, kontrolü her zamanki gibi devre dışı bırakır ve ayrıca aşağıdaki gibi CSS ile normal devre dışı bırakılmış kontrollerden farklı bir şekilde kolayca biçimlendirmenize olanak tanır:

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

Verilerin dahil edilmesini istiyorsanız, diğer yanıtlarda ayrıntılı olarak açıklandığı gibi gönder, gizli alanları kullanın veya göndermeden önce etkinleştirin.

@Kanishka'nın dediği gibi, bir form öğesini devre dışı bırakırsak gönderilmeyecektir. Bu problem için bir pasaj oluşturdum. Seçme öğesi devre dışı bırakıldığında, gizli bir giriş alanı oluşturur ve değeri depolar. Etkinleştirildiğinde, oluşturulan gizli giriş alanlarını siler.

Daha fazla bilgi

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>