CODEWITHSUNDEEP
htmldisabled-inputreadonly-attribute
automatix
automatix

Reputation: 14552

How to make a radio button read-only but not disabled?

The question "How to make radio button read-only?" has already been asked n times. But the solution is always disabled="disabled".

(There can also be complicated JavaScript solutions, that work with the click or change event and prevent the value's change, but all that has usually a smell of a more or less dirty hack.)

The problem / side effect of disabled="disabled" is, that it "removes" the field from the data set and it then isn't sent to the server.

What I want is to make the radio buttons read-only / not changeable -- but in the same time to let them be sent to the server on form submit. disabled doesn't meet this requirement, readonly seems not to work for radio buttons.

What is the correct HTML attribute for making a radio button read-only without to remove it from the form data set?

Upvotes: 5

Views: 22669

Answers (4)

Bernhard Bodenstorfer
Bernhard Bodenstorfer

Reputation: 960

Provided one of the read-only radio buttons is initially checked, you could disable all other radio buttons in the group:

<input name="my_field" value="A" type="radio" checked="checked"/>
<input name="my_field" value="B" type="radio" disabled="disabled"/>
…

Then the user cannot effectively click anywhere to change; but the checked input will generate the response field.

Upvotes: 0

Th3Gam3rz
Th3Gam3rz

Reputation: 191

This might seem a bit hacky but you could just set the value of the radio button to be its initial state when the onclick event is fired for it.

<!DOCTYPE html>
<html>
  <body>
    <input id="button1" type="radio" onmouseover="setValue(this)" onclick="retainValue(this)" checked> Radio Example
    <input id="button2" type="radio" onmouseover="setValue(this)" onclick="retainValue(this)"> Radio Example
    <script>
      var checkboxes = {};
      function setValue(el) {
        if(!(el.id in checkboxes))
          checkboxes[el.id] = el.checked;
      }
      function retainValue(el) {
        if(!(el.id in checkboxes))
          checkboxes[el.id] = el.checked;
        el.checked = checkboxes[el.id];
      }
    </script>
  </body>
</html>

It allows you to have as many radios as you want on the page provided each one has a unique id.

If you're willing to use jQuery then it would be a lot easy to accomplish.

Upvotes: 0

KANAYO AUGUSTIN UG
KANAYO AUGUSTIN UG

Reputation: 2188

If this is what you mean. That you have a radio button which has a value and you don't want the value to be removed or changed but you want to display it to a user maybe to notify his consent. Then I think this should work.

Giving the radio button a name attribute which is assigned to it alone and also the checked attribute like this.

<input type="radio " name="my_radio_btn" value="its_value" checked />

This way, the user can't uncheck it

Upvotes: 0

Matt Jackson
Matt Jackson

Reputation: 158

Try using some CSS:

input[type="radio"].readonly {
  opacity: 0.5; /* not necessary */
  pointer-events: none;
}

Upvotes: 7

Related Questions