Ограничить выбор опции SELECT, не отключая поле

У меня есть поле SELECT с множественным выбором, значение которого я не хочу, чтобы конечный пользователь мог изменять.

По причинам пользовательского интерфейса я хотел бы иметь возможность делать это без использования атрибута disabled = "true". Я пробовал использовать onmousedown, onfocus, onclick и настраивать каждый для размытия или возврата false, но безуспешно.

Можно ли это сделать или я пытаюсь сделать невозможное?

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
6
0
8 339
6
Перейти к ответу Данный вопрос помечен как решенный

Ответы 6

Могли бы вы сделать это с событием onchange?

<select onfocus = "this.oldIndex=this.selectedIndex" onchange = "this.selectedIndex=this.oldIndex">

Лучше всего поменять параметры в поле выбора. Если у вас есть только один ответ в этом поле, не имеет значения, является ли он интерактивным.

Однако я бы попытался найти другой способ сделать это, поскольку, похоже, это вызовет разочарование у пользователя. Представьте себе этот пользовательский сценарий:

  1. «Смотри, набор опций».
  2. щелкнуть
  3. "Хм, почему это не сработало?"
  4. щелкнуть
  5. щелкнуть!
  6. «Эта глупая штука сломана, я никогда не вернусь сюда».

Если вы поменяете выделение на текст HTML, он достигнет той же цели. Это довольно простая задача для большинства основных фреймворков Javascript.

Ответ принят как подходящий

Я знаю, что вы упомянули, что не хотите, но я действительно думаю, что использование атрибута disabled - лучшее решение:

<select multiple = "multiple">
    <option value = "volvo" selected = "true" disabled = "disabled">Volvo</option>
    <option value = "saab" disabled = "disabled">Saab</option>
    <option value = "opel" disabled = "disabled">Opel</option>
    <option value = "audi" disabled = "disabled">Audi</option>
</select>

При необходимости вы всегда можете присвоить selectclass и стилизовать его с помощью CSS. Это решение будет работать во всех браузерах независимо от возможностей написания сценариев.

Хм, похоже, не работает в IE7. Я все еще могу их выбрать. В Firefox они отключены.

Frank Schwieterman 23.09.2009 05:00

Блин IE. Интересно, есть ли эквивалент для disabled = "disabled" для MS? Может быть, только чтение = "только чтение"?

travis 02.12.2009 23:28

Нет, нет. Они реализовали атрибут отключенного HTML4 в ie8 rc2 ПЕРВЫЙ РАЗ.

naugtur 10.03.2010 12:26

@Jack & @ 17 из 26, хороший аргумент, но конечный пользователь будет ожидать, что поле выбора будет отключено, так что путаница не будет проблемой.

Я должен был быть более ясным в том, почему я не мог просто отключить элемент управления.

Приложение, которое будет использовать это, должно будет отключить выбор параметров, и есть требование, чтобы «заблокированный» элемент управления по-прежнему сохранял внешний вид элементов управления нормальной формы.

Попробуйте этот триггер.

<select multiple onchange = "this.selectedIndex=this.selectedIndex">
<option>1</option>
<option>2</option>
</select>

Недавно появилось новое дополнение к CSS3 - 95% совместимость во всех текущих браузерах, кроме Opera Mini, которое называется pointer-events. Проще говоря, вы можете «отключить» действие по умолчанию на SELECT или любом другом элементе и по-прежнему иметь возможность выполнять на нем определенные события ...

Вы можете просмотреть статью Криса Койера о них на введите описание ссылки здесь.

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

Другие вопросы по теме