Can CSS change the disabled status of a Bootstrap switch?

MiguelGisbert
May 26, 2023
317 views
0 votes
2 Answers

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>

Answers

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>

(Edit)

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>

Please signup or login to give your own answer.

Click here to cancel reply.