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
I have sorted it out with jQuery. I was mistaken with the ids as well:
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: