Bootstrap 5 Checks and Radios Disabled

Bootstrap 5 Checks and radios Disabled is used to make a checkbox/radio disabled, which means we won't be able to click on it. Its appearance will also get muted. Add the disabled attribute and the associated <label>s are automatically styled with a lighter color to indicate its disabled state.

Bootstrap 5 Checks and Radios Disabled Class: There is no class to disable check and radio buttons, for that, we will use the old-school HTML Disable attribute.

Syntax:

<input class="..." type="checkbox|radio" disabled>

Below examples illustrate the Bootstrap 5 Checks and Radios Disabled:

Example 1: In this example, we will learn about disabled CheckBox.

HTML

<!DOCTYPE html>
<html>

<head>
    <!-- Bootstrap CDN Link-->
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet" 
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
</head>

<body class="m-3">
    <div>
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <strong>
            Bootstrap 5 Checks and Radios Disabled
        </strong>
        <div class="container">
            <div class="form-check">
                <input class="form-check-input" 
                       type="checkbox">
                <label class="form-check-label">
                    Enabled Checkbox
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" 
                       type="checkbox" disabled>
                <label class="form-check-label">
                    Disabled checkbox
                </label>
            </div>
        </div>
    </div>
</body>
</html>

Output:

Example 2: In this example, we will learn about disabled Radio.

HTML

<!DOCTYPE html>
<html>

<head>
    <!-- Bootstrap CDN Link-->
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
          <title>Radio disabled</title>
</head>

<body class="w-8 m-3">
    <div>
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h3>
             Checks and radios Disabled
        </h3>
        <div class="container">
            <div class="form-check">
                <input class="form-check-input" 
                    type="radio" name="GFG" 
                    id="GFG1" value="option1">
                <label class="form-check-label" 
                    for="GFG1">
                    Abled Radio
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" 
                    type="radio" name="GFG" 
                    id="GFG1" value="option2" 
                    disabled>
                <label class="form-check-label" 
                    for="GFG1">
                    Disabled Radio
                </label>
            </div>
        </div>
    </div>
</body>
</html>

Output:

References:

Bootstrap 5 Checks and Radios Disabled

Explore