Enable or Disable Radio Buttons with JavaScript

The disabled property controls whether a radio button can be focused, changed, or submitted. Set it to true to disable the control and false to enable it.

<input type="radio" name="gender" id="r1" value="male" disabled> Male
<input type="radio" name="gender" id="r2" value="female"> Female

const male = document.getElementById("r1");
male.disabled = true;
male.disabled = false;

Control the Radio Group from a Checkbox Top ↑

The original page uses a checkbox labeled “Others” to enable a pair of radio buttons. The same behavior can be written with a change listener.

<label><input type="checkbox" id="enableGender"> Enable gender choices</label>
<label><input type="radio" name="gender" value="male" disabled> Male</label>
<label><input type="radio" name="gender" value="female" disabled> Female</label>

const toggle = document.getElementById("enableGender");
const radios = document.querySelectorAll('input[name="gender"]');

toggle.addEventListener("change", () => {
  radios.forEach((radio) => {
    radio.disabled = !toggle.checked;
  });
});

Disable or Enable the Whole Radio Group Top ↑

function setRadioGroupDisabled(disabled) {
  document.querySelectorAll('input[name="gender"]').forEach((radio) => {
    radio.disabled = disabled;
  });
}

This scales better than managing each radio button by a separate ID when the group contains many choices.

Disabled Controls and Form Submission Top ↑

A disabled form control is not submitted with the form. If the server needs a value regardless of whether the user may edit it, disabling the only copy of that value is not the same as making it read-only. Radio buttons do not support a readonly state.

Make the State Clear to Users Top ↑

Use a visible label or short explanation so users understand why choices are unavailable. If another control enables the group, that relationship should be clear from the surrounding text and form layout.

Related Validation Tutorials Top ↑

Checkbox · Radio button validation · JavaScript validation · Listbox validation

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: