Why can't radio buttons be "readonly"?

Your alternatives to 'readonly'

Due to the readonly constraint, you'll need to look into various alternative implementations. Let's browse through a few of them:

Employing the Disabled Attribute

Using the disabled attribute is one way of simulating readonly. The button value remains unchanged and visually changes to signal its non-interactive state:

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

JavaScript, your best mate

JavaScript offers a level of control and precision to catch click events and prevent changes to your radio button's state:

// Mate, don't forget to make a cuppa tea while your script is running
document.querySelectorAll('input[type=radio]').forEach(function(radio) {
    radio.addEventListener('click', function(event) {
        if(this.getAttribute('data-readonly') == 'true') {
            event.preventDefault();
            // Here's the secret sauce preventing alteration mate
        }
    });
});


Keeping everyone included with ARIA

With ARIA (Accessible Rich Internet Applications) attributes and clear visual clues, you can reflect a readonly state:

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

Add a bit of CSS for that extra visual pizzazz:

input[type=radio].readonly {
    opacity: 0.5; /* Whoa! That's easier on the eyes, mate! */
}


Storing the precious value

Whatever your approach, don't forget to preserve the value for form submission. Hidden inputs can help maintain the checked option:

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

Advanced Approaches for 'Read-Only' Simulation

When you want to tweak things further, we've got some sophisticated solutions for simulating a readonly state while keeping a robust UX at heart.

Controlling from the server-side

You can adjust your server-side logic to ensure the client-side form's state matches your original data, especially when populating fields from a database:

// PHP example of checking POST data
if (isset($_POST['option']) && $_POST['option'] === $expectedValue) {
    // Booyah! You're safe, the value remains unchanged
}


Custom 'readonly' with JavaScript

To make life even interesting, JavaScript lets you create customizations. Here's how to mimic readonly without disabling the input:

<!-- Regular radio buttons -->
<input type="radio" name="choices" value="choice1" id="choice1">
<input type="radio" name="choices" value="choice2" id="choice2">
<!-- Custom code to enforce original value on change -->
<script>
    // Hope you've refilled your cuppa tea mate, because the magic continues
    let originalChoice = document.getElementById("choice1");
    document.getElementsByName("choices").forEach(function(input) {
        input.addEventListener('change', function() {
            if (originalChoice.checked) {
                setTimeout(() => {
                    originalChoice.checked = true;
                    // Ta-da! Back to the original mate!
                }, 0);
            }
        });
    });
</script>


User interface, your silent ambassador

If readability and smooth user experience call for a readonly style without functional constraints, labels can do the trick along with the radio buttons:

<label for="readonlyOption">Selected Option:</label>
<span id="readonlyOption">Option 1</span>
