Запрет на изменение выбора в HTML select: решение

Быстрый ответ

Чтобы сделать недоступным элемент <select> в HTML, примените атрибут disabled. Для сохранения значения, которое будет использоваться в форме, добавьте скрытый элемент <input> с атрибутом type="hidden".

<select disabled>
  <option value="selectedValue" selected>Выбранный вариант</option>
</select>
<input type="hidden" name="selectName" value="selectedValue">

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

Усовершенствование поведения выпадающего списка

Примените атрибут disabled к выпадающему списку, чтобы создать его статическую версию. Необходимо будет синхронизировать значение элемента select со скрытым полем ввода через обработчики JavaScript для правильной передачи данных формы.

document.querySelector('select').addEventListener('change', function() {
  document.querySelector('input[type="hidden"]').value = this.value;
});

Для эффективного сбора данных с формы, включая скрытые элементы, можно воспользоваться jQuery и методом .serialize().

$('#yourForm').submit(function() {
  console.log($(this).serialize());
});

Для оптимизации пространства и улучшения безопасности рекомендуется применять CSS-правила, такие как display: none, чтобы скрыть ненужные элементы.

Создание эффекта readonly для элемента формы

Чтобы select имитировал readonly, деактивируйте все ненужные опции через атрибут disabled. Таким образом, будет выделен единственный доступный для выбора вариант.

<select>
  <option value="selectedValue" selected>Выбранный вариант</option>
  <option value="unwantedValue" disabled>Нежелательный вариант</option>
</select>

Используйте CSS-свойство pointer-events: none;, чтобы элемент select не реагировал на действия пользователя, создавая эффект readonly.

select[readonly] {
  pointer-events: none;
}

Сразу перед отправкой формы, при необходимости, снимите блокировку с элемента, у которого было включено состояние disabled, используя метод prop в jQuery.

Визуализация

Сформулируем ситуацию с HTML-формой следующим образом: у нас есть набор красок (SELECT), и варианты цветов:

🎨 Палитра: [🔴 Красный, 🟢 Зеленый, 🔵 Синий]

Кисть может коснуться каждого цвета, но из-за атрибута readonly на SELECT выбрать цвет невозможно:

🖌️ Кисть наведена на: [🚫🔴, 🚫🟢, 🚫🔵]

Варианты доступны только для просмотра, точно так же, как и для элемента SELECT с атрибутом readonly.

Эмуляция readonly с помощью CSS и jQuery

Создание эффекта только для чтения благодаря CSS

Если необходимо зафиксироват значение для передачи, атрибут disabled может не давать полного решения. Включите CSS-правила, чтобы сделать невыбираемыми все остальные варианты и группы, создав тем самым эффект readonly.

select[readonly] option:not(:selected) {
  display: none;
}

Подробнее об этом расскажет наш спикер на видео

Динамическое изменение элементов формы с помощью jQuery

jQuery идеально подходит для быстрого изменения свойств форм в зависимости от условий или событий.

$('#selection').change(function() {
  if (/* некоторый критерий */) {
    $(this).prop('disabled', true);
  } else {
    $(this).prop('disabled', false);
  }
  // Здесь также может быть изменение атрибута 'name'.
});

Применение аналога readonly к select

Применение CSS-правил позволяет оставить конкретные поля неизменяемыми, при этом они все еще видимы.

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

Учет доступности

Не забывайте про доступность вашего интерфейса. Технологии для людей с ограниченными возможностями должны правильно воспринимать состояние элементов формы.

select[disabled] {
  opacity: 0.5;
}

Полезные материалы

1. HTML элемент выбора <select> — MDN: HyperText Markup Language — Информация об работе с элементами select в HTML.
2. Атрибут disabled элемента HTML select — Руководство по использованию атрибута disabled для select.
3. Создание более доступных кнопок с использованием атрибута 'disabled' — CSS-Tricks — Советы по созданию доступных и отключенных элементов управления.
4. HTML стандарт — Спецификация для элементов HTML-форм.
5. Чеклист по доступности – Проект A11Y — Рекомендации по обеспечению доступности элементов форм.
6. Все о формах — web.dev — Руководство по созданию современных и эффективных форм.