November 12, 2022

How to Make Radio Button Disabled in HTML

In this tutorial, you will learn how to make radio button disabled in HTML. Typically, radio buttons are small circles that fill up when they are selected. When you are creating a form, you may want to disable some of the radio buttons for certain reasons.

To make the radio button disabled, we have to use the HTML disabled attribute. The disabled attribute is a Boolean attribute. The disabled attribute is used to specify that the input element should be disabled so that a user could not enter any value in it.

In the following example, we have two radio buttons and we will disable them using disabled attribute. Please have a look over the code example and the steps given below.

HTML

In the HTML file, we have multiple elements such as div, h3, and input. The parent div element is just a wrapper for the rest of the elements.
The h3 is a heading tag with some text content.
We have 3 inputs with a type value set to radio. The third input has a disabled attribute, which specifies that the input element is disabled.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Radio button disabled</title>
</head>

<body>
    <div>
        <h3>Radio Button Disabled</h3>
        <div><input type="radio" name="gender" value="male">Male</div>
        <div><input type="radio" name="gender" value="female">Female</div>
        <div><input type="radio" name="gender" value="other" disabled>Other</div>
    </div>
</body>

</html>

You May Also Like: