Demo: Enable or Disable Radio Buttons

Check “Enable gender choices” to activate the radio buttons. Clear it to disable the group again.

JavaScript Used in This Demo Top ↑

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

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

HTML Used in This Demo Top ↑

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

← Enable/disable radio tutorial

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: