Сделать checkbox в HTML недоступным: readonly и не только

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

HTML-флажки не предусматривают установку в режим только для чтения "из коробки". Однако можно предотвратить изменение их состояния пользователем, добавив обработчик onclick="return false" или воспользовавшись атрибутом disabled для их деактивации. Нужно передать значение флажка? Примените скрытое поле, чтобы значение было передано вместе с формой.

<!-- Флажок, состояние которого нельзя изменить -->
<input type="checkbox" onclick="return false" checked />

<!-- Скрытое поле для передачи значения флажка -->
<input type="hidden" value="true" name="checkboxName" />

Имитация режима только для чтения

Визуальное оформление немодифицируемых флажков

Для того чтобы пользователю было понятно, что флажок не подлежит изменению, можно стилизовать его: подсветить бледным или серым цветом. Используйте следующее оформление CSS, без необходимости применения атрибута disabled.

/* Серый цвет подсказывает о неактивности флажка */
input[type=checkbox].readonly + label {
  color: #cccccc;
}

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

JavaScript: приглушитель изменчивости флажков

Для предотвращения изменения состояния флажков при клиентском взаимодействии используйте JavaScript, который отменяет стандартные действия, подобно телохранителю, не позволяющему без разрешения выйти из здания.

/* Ведом о запрете, ни один флажок не изменит своё состояние */
let readOnlyCheckboxes = document.querySelectorAll('.readonly-checkbox');
readOnlyCheckboxes.forEach(checkbox => {
  checkbox.addEventListener('click', e => {
    e.preventDefault();
  });
});

Серверная логика: надежная защита

Для сохранения информации о состоянии флажков эффективным методом служит использование серверной проверки. Сервер убеждается в том, что данные не должны быть изменены без разрешения.

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

Представьте себе флажки как письма:

[✉️️] – Флажок (Письмо)
[✍️] – Вы (отметка в письме)
[🔒] – Режим только для чтения (Запечатанный конверт)

Режим только для чтения:

[✉️🔒] (Невозможно отметить) [✍️]—"Как мне вскрыть эту печать?!"

Отсутствие режима только для чтения:

[✉️] (Можно отметить) [✍️]—"Вот и ручка, начинаем."

Обработка исключений для флажков

Состояние флажков и отправка формы

При симуляции readonly с использованием disabled, помните: флажок не передаст своё значение при отправке формы. Для решения проблемы добавьте скрытое поле, которое неосязаемо передает значение флажка.

Синхронизация полей

Если вы используете группу флажков с симуляцией readonly, синхронизируйте их имя (name) и свяжите каждый флажок со своим скрытым полем.

Пользовательские элементы управления: станьте магом!

Создание уникальных элементов управления флажками, поддерживающих режим `readonly, требует знания и умения в HTML, CSS и JavaScript. Важно прекрасно разобраться в функционировании этих элементов и обеспечить их доступность.

Защита вашего замка из флажков

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

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

1. <input type="checkbox"> – HTML: HyperText Markup Language | MDN — Обновите свои знания с помощью руководства MDN по флажкам в HTML.
2. How To Create a Custom Checkbox and Radio Buttons — W3Schools научит вас создавать элегантные флажки пошагово.
3. Can HTML checkboxes be set to readonly? – Stack Overflow — Обсуждение сообщества на Stack Overflow о немодифицируемых флажках.
4. Making Disabled Buttons More Inclusive | CSS-Tricks – CSS-Tricks — CSS-Tricks делится рекомендациями по созданию более доступных неактивных кнопок, включая и флажки.
5. HTML Standard — спецификации WHATWG освещают поведение элементов ввода, включая флажки, в HTML.
6. HTML Standard — Другая часть стандарта HTML от WHATWG, регламентирующая принципы работы состояний флажков.