21.04.2025

Botões de Rádio: Como Tornar o Valor Somente para Leitura?

Resposta Rápida

Os botões de rádio não suportam o atributo readonly, uma vez que sua principal finalidade é permitir a seleção entre múltiplas opções. Para simular um comportamento readonly, um botão de rádio pode ser desativado usando JavaScript, enquanto o valor atual pode ser enviado por meio de um campo oculto. Aqui está um exemplo de um botão de rádio não interativo que ainda transmite seu valor:

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

Neste caso, o clique é desativado com onclick="return false;", e o campo oculto permite que o valor do botão seja transmitido ao enviar o formulário.

Alternativas ao Atributo readonly

Para imitar o comportamento readonly, é necessário empregar vários métodos de implementação:

Atributo Disabled

Uma abordagem é usar o atributo disabled, que torna o botão de rádio indisponível para interação e altera visualmente sua aparência:

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

JavaScript para Assistência

Usando JavaScript, você pode controlar precisamente o comportamento dos botões de rádio, prevenindo qualquer alteração:

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

Usando ARIA para Acessibilidade

Com atributos ARIA e indicadores visuais, você pode representar o status do elemento como readonly:

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

Além disso, você pode melhorar o estilo visual com CSS adicional:

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

Preservando o Valor

Independentemente do método escolhido, é importante lembrar sempre da necessidade de manter o valor para submissão via formulário:

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

Hora da Visualização

Para demonstrar de forma vívida por que o atributo readonly não pode ser usado com botões de rádio, imagine um jogo de pega-pega:

• Temos dois jogadores representados como botões de rádio.
• "Readonly" significa "você não pode me escolher, mas pode escolher outra pessoa."

Portanto,

• Os botões de rádio permitem apenas uma escolha, excluindo outras opções.
• Se fosse possível definir um estado readonly, isso violaria esse princípio.

Métodos Avançados para Simular 'Somente para Leitura'

Existem métodos mais sofisticados para simular readonly, proporcionando uma experiência de interface de usuário aprimorada.

Gestão do Lado do Servidor

A lógica do servidor pode ser configurada para corresponder aos dados do lado do cliente, especialmente ao popular o formulário a partir de um banco de dados:

if (isset($_POST['opcao']) && $_POST['opcao'] === $valorEsperado) {
    // Tudo está correto, valor salvo
}

'Somente para Leitura' Personalizado no Lado do Cliente

JavaScript oferece oportunidades para criar cenários personalizados. Aqui está um script de exemplo que cria a ilusão de readonly sem bloquear o elemento:

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

Estilização para uma Interface de Usuário Personalizada

Quando um estilo readonly é necessário, mas sem limitar a funcionalidade, você pode usar rótulos e elementos de texto:

<label for="opcaoSomenteLeitura">Opção Selecionada:</label>
<span id="opcaoSomenteLeitura">Opção 1</span>

Recursos Úteis

1. Atributo readonly de entrada HTML — Um guia detalhado sobre o atributo readonly em HTML.
2. <input type="radio"> - HTML: Linguagem de Marcação Hipertexto | MDN — Informações sobre botões de rádio em HTML da Mozilla.
3. Qual a diferença entre disabled="disabled" e readonly="readonly" para campos de entrada de formulário HTML? - Stack Overflow — Uma discussão sobre as diferenças entre os atributos disabled e readonly.
4. Formulários em documentos HTML — Uma visão geral dos atributos de formulário da W3C, incluindo readonly.
5. Elementos desabilitados devem ser focáveis para fins de acessibilidade? - User Experience Stack Exchange — Uma discussão sobre acessibilidade e foco em elementos com atributos disabled ou readonly.

Video

Navigation