Как запретить пользователю изменять значение выбора без использования отключен?

Question

У меня есть большая форма, которая имеет много полей, включая некоторые опции выбора. Я хочу запретить пользователям изменять опцию выбора без использования «отключен». Поскольку отключено, поля POST не включаются.

Я попробовал следующее с javascript:

field.readonly = true;

Но я обнаружил, что readonly не работает с select, как с текстовым вводом. Итак, как я могу помешать пользователям изменять выбранное значение. Пожалуйста, имейте в виду, что я хочу отправить значение select с формой сообщения.

Answer 1

Вы можете просто использовать свойство css pointer-events: none; в теге select. Он предотвращает срабатывание любых кликов в раскрывающемся списке, поэтому раскрывающийся список не будет работать, и вы также можете получить значение раскрывающегося списка в форме отправки.

.disabledByMe{
  pointer-events: none;
}

<select name="test" class="disabledByMe">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Answer 2

Не уверен, что вы имели в виду сделать <select> неизменным после того, как они были изменены, или они начинаются таким образом.Я предполагаю, что первое (изменилось только один раз?) Но если второе, это простая модификация, дайте мне знать, если у вас есть проблемы.Эта демонстрационная программа выполняет следующие действия:

• Отключает <select> после использования пользователем.
• Назначает значение <select> значению <input type='hidden'>.
• <input type='hidden'> присваивается [name= X ];X = select.name или X = select.id
• Форма настроена для отправки данных на живой тестовый сервер .Ответ перенаправляется на <iframe>.
• В случае успеха в ответе должны указываться key/value пара (ы), ${nameOfSelect/HiddenInput}:{valueOfSelect/HiddenInput}

Демо

var M = document.forms.main;
var F = M.elements;
var FS = F.fieldset0;

FS.addEventListener('change', freeze);

function freeze(e) {
  if (e.target.tagName === "SELECT") {
    var tgt = e.target.id;
    e.target.disabled = true;
    var cache = document.querySelector(`input[name=${tgt}]`);
    cache.value = e.target.value;
  }
}

[type=submit] {
  display: block;
}

<form id='main' action='https://httpbin.org/post' method='post' target='view'>

  <fieldset id='fieldset0'>
    <select id='select0' name='select0'>
      <option default value=""></option>
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
      <option value="D">D</option>
      <option value="E">E</option>
    </select>
    <select id='select1' name='select1'>
      <option default value=""></option>
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
      <option value="D">D</option>
      <option value="E">E</option>
    </select>
    <select id='select2' name='select2'>
      <option default value=""></option>
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
      <option value="D">D</option>
      <option value="E">E</option>
    </select>
  </fieldset>
  <input id='cache0' name='select0' type='hidden'>
  <input id='cache1' name='select1' type='hidden'>
  <input id='cache2' name='select2' type='hidden'>
  <input type='submit'>

  <iframe name='view'></iframe>

Answer 3

Вы можете использовать preventDefault() и return false; с помощью клавиатуры и мыши.

<select onkeydown="event.preventDefault(); return false;" onmousedown="event.preventDefault(); return false;">
    <option>A</option>
    <option>B</option>
</select>

В качестве альтернативы, я обычно делаю то, что хочу, не отключая, получаю постданные и возвращаю их обратно отключенным.

var $disabled = $('#form").find(':disabled');
$disabled.prop('disabled', false);

var postdata = $('#form').serialize();
$disabled.prop('disabled', true);

$.post('/file.php', postdata, function(data) {});