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

Пройдите тест, узнайте какой профессии подходите

Я предпочитаю
0%
Работать самостоятельно и не зависеть от других
Работать в команде и рассчитывать на помощь коллег
Организовывать и контролировать процесс работы

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

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

HTML
Скопировать код
<select disabled>
  <option value="selectedValue" selected>Выбранный вариант</option>
</select>
<input type="hidden" name="selectName" value="selectedValue">

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

Кинга Идем в IT: пошаговый план для смены профессии

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

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

JS
Скопировать код
document.querySelector('select').addEventListener('change', function() {
  document.querySelector('input[type="hidden"]').value = this.value;
});

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

JS
Скопировать код
$('#yourForm').submit(function() {
  console.log($(this).serialize());
});

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

Создание эффекта

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

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

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

CSS
Скопировать код
select[readonly] {
  pointer-events: none;
}

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

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

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

Markdown
Скопировать код
🎨 Палитра: [🔴 Красный, 🟢 Зеленый, 🔵 Синий]

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

Markdown
Скопировать код
🖌️ Кисть наведена на: [🚫🔴, 🚫🟢, 🚫🔵]

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

Эмуляция

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

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

CSS
Скопировать код
select[readonly] option:not(:selected) {
  display: none;
}

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

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

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

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

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

JS
Скопировать код
$('#selection').css('pointer-events', 'none');

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

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

CSS
Скопировать код
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 — Руководство по созданию современных и эффективных форм.
Проверь как ты усвоил материалы статьи
Пройди тест и узнай насколько ты лучше других читателей
Как сделать элемент <select> недоступным для выбора?
1 / 5