How to Disable Radio Button in HTML?

This article will show you how to disable Radio Button in HTML. The disabled attribute is used to disable a radio button in HTML. This attribute prevents the radio button from being selected by the user.

Using the disabled Attribute

The disabled attribute is used to disable the input fields. To disable the radio button, add the disabled attribute within the <input type="radio"> element.

Syntax:

<input type="radio" disabled>

Example 1: In this example, we will disable one radio button.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        How to Disable Radio Button in HTML?
    </title>
</head>

<body>
    <p>Select Subject</p>

    <input type="radio" id="html" 
        name="radioGroup" value="html">
    <label for="html">HTML</label>
    <br>

    <input type="radio" id="css" 
        name="radioGroup" value="css">
    <label for="css">CSS</label>
    <br>

    <input type="radio" id="js" 
        name="radioGroup" value="javascript" disabled>
    <label for="js">JavaScript</label>
</body>

</html>

Output:

Example 2: In this example, we will disable all radio buttons.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        How to Disable Radio Button in HTML?
    </title>
</head>

<body>
    <p>Select Subject</p>

    <input type="radio" id="html" 
        name="radioGroup" value="html" disabled>
    <label for="html">HTML</label>
    <br>

    <input type="radio" id="css" 
        name="radioGroup" value="css" disabled>
    <label for="css">CSS</label>
    <br>

    <input type="radio" id="js" 
        name="radioGroup" value="javascript" disabled>
    <label for="js">JavaScript</label>
</body>

</html>

Output:

In this example, all radio buttons are disabled and cannot be selected by the user. The disabled attribute is added to each <input> element.

Article Tags :

HTML

Web Technologies

HTML-Questions