有人知道當自舉開關按鈕被禁用時，如何設計它的樣式嗎？我設法將它設置為啟用狀態，但對于禁用狀態，它仍然作為引導默認效果變暗。我想讓它在禁用時和啟用時有相同的外觀。

此外，我如何檢查它是啟用還是禁用，并使單詞& quot每年& quot或者& quot每月& quot大膽取決于這一點？謝謝！

.form-check.form-switch .form-check-input {
  box-shadow: none; 
  cursor: pointer; 
  height: 20px; 
  width: 40px; 
  background-color: #5382FB; 
}

.form-check-input[type="checkbox"]:disabled + .form-check-label::before {
    background-color: #5382FB;
    border-color: #5382FB;
    opacity: 1;
}

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <link  rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>

<div class="d-flex justify-content-center align-items-center">
    <div class="monthly me-3">Monthly</div>
    <div class="form-check form-switch">
        <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
    </div>
    <div class="annually ms-3">Annually</div>
</div>

禁用在這里是一個錯誤的詞。它被選中或未選中，要使單詞加粗，您需要JS并監聽按鈕的change事件。

示例:

document.getElementById('switch').addEventListener('change', () => {
  const switchBtn = document.getElementById('switch');
  const monthly = document.getElementById('monthly');
  const annually = document.getElementById('annually');
  if (switchBtn.checked) {
    annually.classList.toggle('fw-bold');
    monthly.classList.toggle('fw-bold');
  } else {
    annually.classList.toggle('fw-bold');
    monthly.classList.toggle('fw-bold');
  }
});

.form-check.form-switch .form-check-input {
  box-shadow: none; 
  cursor: pointer; 
  height: 20px; 
  width: 40px; 
  background-color: #5382FB; 
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e")
}

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <link  rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>

<div class="d-flex justify-content-center align-items-center">
    <div id="monthly" class="me-3 fw-bold">Monthly</div>
    <div class="form-check form-switch" id="switch">
        <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
    </div>
    <div id="annually" class="ms-3">Annually</div>
</div>

我已經用jQuery整理好了。我也弄錯了id:

// PLANS SWITCH BUTTONS

$("#switch-1").on('change', function() {
  if($(this).is(':checked')) {
    $('#price-1').html('499€')
    $('#monthly-1').css({'font-weight':'400', 'text-decoration':'none'})
    $('#annually-1').css({'font-weight':'700', 'text-decoration':'underline'})
  }
  else {
    $('#price-1').html('599€')
    $('#monthly-1').css({'font-weight':'700', 'text-decoration':'underline'})
    $('#annually-1').css({'font-weight':'400', 'text-decoration':'none'})
  }
});

.form-check.form-switch .form-check-input {
  box-shadow: none; 
  cursor: pointer; 
  height: 20px; 
  width: 40px; 
  background-color: #5382FB; 
}

.form-check-input[type="checkbox"]:disabled + .form-check-label::before {
    background-color: #5382FB;
    border-color: #5382FB;
    opacity: 1;
} 

.annually {
  text-decoration: underline;
  font-weight: 700;
}

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <link  rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>

<div class="d-block m-auto">
    <div class="d-flex justify-content-center"><span id="price-1">499€</span></div>
    <div class="d-flex justify-content-center"><span class="mb-2">/ month</span></div>
    <div class="d-flex justify-content-center align-items-center">
        <div id="monthly-1" class="monthly text-end">Monthly</div>
        <div class="form-check form-switch mx-2 p-0 d-flex justify-content-center">
            <input class="form-check-input m-auto" type="checkbox" role="switch" id="switch-1" checked>
        </div>
        <div id="annually-1" class="annually">Annually</div>
    </div>
</div>