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.
- In the HTML file, we have multiple elements such as
input. The parent
div element is just a wrapper for the rest of the elements.
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.
<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>
<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>