skip to Main Content

Anybody knows how to style the bootstrap switch button when it’s disabled? I managed to style it for enabled status but for disabled it still gets dark as a bootstrap default effect. I’d like to have it the same appearance for disabled than for enabled.

In addition, how could I check if it’s enabled or disabled and make the words "annually" or "monthly" bold depending on that? Thanks!

.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 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

2

Answers


  1. Chosen as BEST ANSWER

    I have sorted it out with jQuery. I was mistaken with the ids as well:

    // 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 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>


  2. Disabled is the wrong word here. It is checked or unchecked and to make the words bold you need JS and listen for the change event of the button.

    Example:

    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 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search