Radio кнопки: как сделать значение только для чтения?

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

Радиокнопки не предусматривают возможность применения атрибута readonly, поскольку их основное предназначение — обеспечение возможности выбора из нескольких вариантов. Для имитации поведения readonly, радиокнопка может быть блокирована с использованием JavaScript, при этом текущее значение можно передать через скрытое поле. Вот пример неактивной радиокнопки, которая при этом передает свое значение:

<input type="radio" onclick="return false;" name="fixedOption" value="1" checked>
<input type="hidden" name="fixedOption" value="1">

Здесь блокировка клика достигается с помощью onclick="return false;", а скрытое поле позволяет передавать значение кнопки при отправке формы.

Альтернативы атрибуту 'readonly'

Для имитации поведения readonly придется применить различные способы реализации:

Атрибут Disabled

Один из подходов — использование атрибута disabled. Он делает радиокнопку недоступной для взаимодействия и визуально меняет ее внешний вид:

<input type="radio" name="option" value="1" checked disabled>

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

JavaScript на подмоге

С помощью JavaScript можно точно управлять поведением радиокнопок, блокируя их изменения:

document.querySelectorAll('input[type=radio]').forEach(function(radio) {
    radio.addEventListener('click', function(event) {
        if (this.getAttribute('data-readonly') === 'true') {
            event.preventDefault();
        }
    });
});

Использование ARIA для обеспечения доступности

С помощью атрибутов ARIA и визуальных индикаторов можно отобразить статус элемента как readonly:

<input type="radio" name="option" value="1" checked aria-readonly="true" class="readonly">

А также дополнительный CSS для улучшения визуального оформления:

input[type=radio].readonly {
    opacity: 0.5; 
}

Сохранение значения

Вне зависимости от выбранного похода важно всегда помнить о необходимости сохранения значения для его отправки при помощи формы:

<input type="radio" name="option" value="1" checked disabled>
<input type="hidden" name="option" value="1">

Время визуализации

Для наглядной демонстрации того, почему нельзя использовать атрибут readonly с радиокнопками, представьте игру в догонялки:

• У нас есть два игрока, представленных радиокнопками.
• "Readonly" означает "ты не можешь меня выбрать, но можешь выбрать кого-то другого."

Таким образом:

• Радиокнопки позволяют сделать только один выбор, исключая остальные варианты.
• Если бы можно было установить состояние readonly, это нарушало бы данный принцип.

Продвинутые методы симуляции 'Только для чтения'

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

Управление на серверной стороне

Логику сервера можно настроить таким образом, чтобы она соответствовала данным на клиентской стороне, особенно при заполнении формы из базы данных:

if (isset($_POST['option']) && $_POST['option'] === $expectedValue) {
    // Всё верно, значение сохранено
}

Пользовательский 'readonly' на клиентской стороне

JavaScript предоставляет возможности для создания пользовательских сценариев. Вот пример сценария, создающего иллюзию readonly, не блокируя при этом элемент:

<input type="radio" name="choices" value="choice1" id="choice1">
<input type="radio" name="choices" value="choice2" id="choice2">
<script>
    var originalChoice = document.getElementById("choice1");
    document.getElementsByName("choices").forEach(function(input) {
        input.addEventListener('change', function() {
            if (originalChoice.checked) {
                setTimeout(() => {
                    originalChoice.checked = true;
                }, 0);
            }
        });
    });
</script>

Оформление пользовательского пользовательского интерфейса

Когда требуется стиль readonly, но без ограничений функциональности, вам могут помочь метки и текстовые элементы:

<label for="readonlyOption">Выбранный вариант:</label>
<span id="readonlyOption">Вариант 1</span>

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

1. HTML input readonly Attribute — Подробное руководство по атрибуту readonly в HTML.
2. <input type="radio"> – HTML: HyperText Markup Language | MDN — Информация о радиокнопках в HTML от Mozilla.
3. What's the difference between disabled="disabled" and readonly="readonly" for HTML form input fields? – Stack Overflow — Обсуждение различий между атрибутами disabled и readonly.
4. Forms in HTML documents — Обзор атрибутов форм от W3C, включая readonly.
5. Should disabled elements be focusable for accessibility purposes? – User Experience Stack Exchange — Дискуссия о доступности и фокусировке элементов с атрибутом disabled или readonly.