Bootstrap 5 Checks and Radios Disabled
Last Updated :
23 Nov, 2022
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>
<link href=
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>
<link href=
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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...