HTML-форма readonly SELECT тег / ввод

Вы должны сохранить inputэлемент, disabledно также добавить еще один скрытый inputс тем же именем и значением.

Если вы повторно используете свой $ ('# mainform'). Submit (function () {$ ('# formdata_container'). Show (); $ ('# formdata'). Html ($ (this) .serialize ()); return false;}); $ ('# enableelect'). click (function () {$ ('# mainform input [name = animal]') .attr ("disabled", true); $ ('# animal-select') .attr (' disabled ', false) .attr (' name ',' animal '); $ (' # enableelect '). hide (); return false;}) ;, вы должны скопировать его значение на скрытый ввод в событии onchange и отключить (или удалить) скрытый ввод.

Вот демонстрация:

#formdata_container {
    padding: 10px;
}

<select>
<option disabled="disabled">1</option>
<option selected="selected">2</option>
<option disabled="disabled">3</option>
</select>

$('#yourSelect').prop('disabled', true);

Мы могли бы также использовать это

Отключите все, кроме выбранной опции:

$('#yourForm').on('submit', function() {
    $('#yourSelect').prop('disabled', false);
});

Таким образом, выпадающее меню все еще работает (и отправляет его значение), но пользователь не может выбрать другое значение.

демонстрация

Вы можете снова включить объект select в submit.

EDIT : т. Е. Обычно отключая тег select (с отключенным атрибутом), а затем повторно включающий его непосредственно перед отправкой формы:

Пример с jQuery:

• Чтобы отключить его:

  $('#yourForm').on('submit', function() {
      $('input, select').prop('disabled', false);
  });
  

• Чтобы снова включить его перед отправкой, чтобы включить данные GET / POST:

  <select id="countries" onfocus="this.defaultIndex=this.selectedIndex;" onchange="this.selectedIndex=this.defaultIndex;">
  <option value="1">Country1</option>
  <option value="2">Country2</option>
  <option value="3">Country3</option>
  <option value="4">Country4</option>
  <option value="5">Country5</option>
  <option value="6">Country6</option>
  <option value="7" selected="selected">Country7</option>
  <option value="8">Country8</option>
  <option value="9">Country9</option>
  </select>
  

Кроме того, вы можете повторно включить каждый отключенный ввод или выбрать:

readOnly

select

Протестировано и работает в IE 6, 7 и 8b2, Firefox 2 и 3, Opera 9.62, Safari 3.2.1 для Windows и Google Chrome.

другой способ сделать cssатрибут для selectэлемента - использоватьcss

вы можете сделать так:

$('#selection').css('pointer-events','none');

DEMO