Я використовую наступне твердження, щоб зробити його лише для читання, але воно не працює.

$('#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використання CSS для укладання і JS для запобігання зміни з вкладкою:

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>

Так, я знаю, що мені краще використовувати prop, а не attr, але принаймні зараз prop не буде працювати через стару версію jquery, і тепер я не можу його оновити, не питайте, чому ... 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()" />

...

Я не знайшов помилок у сценарії, а у версії з іменем помилок у консолі не було. Але, звичайно, це може бути моєю помилкою в коді

Бачив: Chrome 26 на Win 7 Pro

Вибачте за погану граматику.

Я знайшов, кращий спосіб зробити це - використовувати CSS для видалення покажчиків-подій та зміни непрозорості у спадному меню (спробуйте 0,5). Це дає користувачеві уявлення, що він вимкнений, як звичайно, але все одно публікує дані.

Звичайно, у цього є деякі проблеми із зворотною сумісністю, але, на мій погляд, кращий варіант, ніж обійти надокучливу проблему з обмеженими можливостями / читанням.

Ви також можете його відключити, і на момент здійснення дзвінка для подання ввімкнути. Я думаю, це найпростіший спосіб :)

Це працює дуже добре

$('#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, наприклад 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>