禁用Bootstrap 5检查和Radios

Bootstrap 5 Checkcks and radios Disabled用于使一个复选框/收音机失效，这意味着我们将无法点击它。它的外观也会被削弱。添加disabled属性，相关的<label>会自动用浅色来表示其禁用状态。

Bootstrap 5 Checks and Radios Disabled Class:没有禁用check和radio按钮的类，为此，我们将使用老式的HTML Disable属性。

语法:

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

下面的例子说明了Bootstrap 5检查和Radios的禁用情况：

例子1：在这个例子中，我们将学习禁用的CheckBox。

<!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>

输出:

禁用Bootstrap 5检查和Radios

例子2：在这个例子中，我们将学习禁用无线电。

<!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>