次のステートメントを使用して読み取り専用にしていますが、機能しません。

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

無効にしたくない、読み取り専用にしたい。

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

ドロップダウンは常に読み取り専用です。あなたができることはそれを無効にすることです

フォームを操作する場合、無効なフィールドは送信されないため、非表示フィールドを使用して無効なドロップダウン値を保存します

私は同じ問題を抱えていましたが、私の解決策は選択されていないすべてのオプションを無効にすることでした。jQueryで非常に簡単：

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

編集=> 同じページに複数のドロップダウンがある場合は、以下のように、select-IDで選択されていないオプションをすべて無効にします。

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

選択した値を無効にせずに、これを試してください。

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

わたしにはできる..

これはあなたが探しているものです：

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

魅力のように機能します。

で要素を設定してdisabledもデータは送信されselectませんが、要素にはがありませんreadonly。

あなたは、シミュレートすることができますreadonly上selectのタブで変更を防ぐために、スタイリングやJSのためのCSSを使用しました：

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

次に、次のように使用します。

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

結果：

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

フィールドを無効にします。次に、フォームを送信するときに、無効にしないようにします。私の意見では、これは隠しフィールドを処理する必要があるよりも簡単です。

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

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

物事を単純化するために、手間をかけずにそれを行うjQueryプラグインがあります：https : //github.com/haggen/readonly

次の行は、readonly属性を選択して読み取り専用にします。

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

このコードは最初に各ドロップダウンに元の選択を保存します。次に、ユーザーが選択を変更すると、ドロップダウンが元の選択にリセットされます。

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

私にとって最も簡単なオプションは、選択を読み取り専用にして追加することでした：

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

追加のロジックを記述する必要はありません。非表示の入力がないか、無効にしてからフォームの送信時に再度有効にします。

古い記事ですが、見つけてくれる人に警告したいです。名前で取得した要素を持つ無効化された属性に注意してください。奇妙ですが、あまり効果がないようです。

これは機能しません：

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

この作品：

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

はい、私はより適切にattrではなくpropを使用する必要があることを知っていますが、少なくとも今はjqueryの古いバージョンのためにpropは機能しません、そして今私はそれを更新できません... htmlの違いは追加された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()" />

...

スクリプトに間違いは見つかりませんでした。名前付きのバージョンでは、コンソールにエラーはありませんでした。もちろん、それはコードの私の間違いかもしれません

見られる：Win 7 Pro上のChrome 26

文法がおかしい。

私が見つけた、これを行うためのより良い方法は、CSSを使用してポインターイベントを削除し、ドロップダウンの不透明度を変更することです（0.5を試してください）。これにより、ユーザーには通常どおり無効になっているように見えますが、データは投稿されます。

これには後方互換性に関するいくつかの問題がありますが、私の意見では、迷惑な無効化/読み取り専用の問題を回避するよりも良いオプションです。

また、それを無効にして、submit呼び出しを行った時点で有効にすることもできます。私は最も簡単な方法だと思います:)

それはとてもうまくいきます

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

これでオプションは表示されますが、選択できません

読み取り専用のドロップダウンなどはありません。できることは、変更するたびに手動で最初の値にリセットすることです。

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

http://jsfiddle.net/4aHcD/

「キーを押す」ときに空の文字列を作成してみてください

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

//空の文字列でキーアップ後に作成

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

たぶんあなたはこの方法を試すことができます

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

これにより、ドロップダウンの最初の値がデフォルトとして設定され、読み取り専用のように見えます

html5サポート：

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

`

これは、無効化の使用を提案する他の回答のわずかなバリエーションです。「無効」属性は実際には任意の値を持つことができ、それでも無効にすることができるため、disabled = "readonly"のように、それを読み取り専用に設定できます。これにより、通常どおりコントロールが無効になり、次のようなCSSを使用して、通常の無効なコントロールとは異なるスタイルを簡単に設定できるようになります。

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

データを送信に含める場合は、他の回答で詳しく説明されているように、非表示フィールドを使用するか、送信前に有効にします。

@Kanishkaが言ったように、フォーム要素を無効にすると送信されません。この問題のスニペットを作成しました。select要素が無効になると、非表示の入力フィールドが作成され、値が格納されます。有効にすると、作成された非表示の入力フィールドが削除されます。

より詳しい情報

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>