Toggle the operational status of the bootstrap switch

Does anyone have a solution for customizing the appearance of the Bootstrap switch button when it is disabled? I have successfully styled it for the enabled state, but it defaults to a dark appearance when disabled. I would like the disabled state to have the same appearance as when it is enabled.

Additionally, is it possible to determine if the button is enabled or disabled, and then make the words "annually" or "monthly" bold accordingly? Thank you!


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

cssinputfrontendswitch-statementbootstrap-5

Answer №1

Incorrect is not the appropriate term to use in this context. The correct terms are checked or unchecked, and in order to make these words bold, JavaScript needs to be utilized while listening for the change event of the button.

Illustration:

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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="50323f3f24232422312010657e637e607d313c20383163">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="21434e4e55525553405161140f120f110c404d51494012">[email protected]</a>/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>

Answer №2

I managed to resolve the issue using jQuery. It turns out I had mistaken the ids:

// TOGGLE BETWEEN PLAN OPTIONS

$("#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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c6a4a9a9b2b5b2b4a7b686f3e8f5e8f6eba7aab6aea7f5">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="11737e7e65626563706151243f223f213c707d61797022">[email protected]</a>/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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Increasing Gap between Tabs in Primefaces AccordionPanel: A Guide

Is there a way to increase the spacing between the tabs of a Primefaces AccordionPanel component? ...

cssjsfjsf-2primefacesaccordion

jquery technique for toggling a single button

My goal is to use jQuery to toggle a button rather than the typical paragraph toggling. I want the button to appear and disappear when clicked, while also increasing the "score" upon each click and decreasing it when the button reappears. Can anyone guide ...

javascriptjqueryhtmlcss

Adjust the font size of the immediate child element that belongs to the fs-5 class

I have implemented a media query specifying the pixel value at which I want to apply a specific font size to all direct child elements (paragraphs) of the div. Within these paragraphs, there is one with the class=fs-5. However, when viewing it responsivel ...

csstwitter-bootstrapbootstrap-4media-queriesbootstrap-5

The border-radius property in CSS selectively rounds only one corner of the modal div window

There seems to be an issue with the border-radius property on modal divs in my project. When I apply the property, only one or two corners of the div round while the other corners remain unchanged. For a visual reference, please check out this image linke ...

htmlruby-on-railscsssass

Styling with CSS: Creating a scrollable gallery of images with a hover effect

I'm struggling to align multiple images horizontally on the page with a hover effect for each image. I can achieve one or the other separately, but not both together. As a beginner in HTML/CSS, I know it's a simple process. Below is my code with ...

javascriptjqueryhtmlcss

Creating Repeating nth-child Patterns with CSS

Currently grappling with a unique CSS challenge related to patterns. Here's what I'm aiming for: For LI 1-3 = green background For LI 4-6 = red background For LI 7-9 = blue background This sequence should repeat as follows: LI 10-12 = green ...

css

Upgrade button-group to dropdown on small screens using Bootstrap 4

I am currently developing a web application and incorporating Bootstrap 4 for certain components such as forms and tables. Within the design, I have included buttons grouped together to display various actions. Below is an example code snippet: <li ...

javascriptjquerycssbootstrap-4

Problems arising from the layout of the PrimeNG DataView component when used alongside Prime

I've been working with a PrimeNG DataView component that requires the use of PrimeFlex's flex grid CSS classes to set up the grid structure. One of their examples includes the following instructions: When in grid mode, the ng-template element ...

cssangulartypescriptprimengprimeflex

Text alignment issues cause animation to vanish

Utilizing particles.js, I set up a full-screen particle effect by specifying the animation to be full-screen with height: 100vh;. This worked perfectly as intended. However, when attempting to add text on top of the particle animation and center it vertica ...

javascripthtmlcss

Tips on concealing the scrollbar only when a particular element is visible

I inserted the following code into my index.html file: <head> <style> body::-webkit-scrollbar { display: none; } </style> </head> This code successfully hides the scrollbar. My goal is to only h ...

cssangular

"Troubleshooting issue: Changing the image src with jQuery

Seeking assistance for an issue I am facing. I am trying to change an image upon clicking on it. It works smoothly without any animation, but when I add animations, the transition becomes jerky. <script> $("#thumbs img").click(function() ...

htmljquerycss

The module cannot be located due to an error: Package path ./dist/style.css is not being exported from the package

I am facing an issue with importing CSS from a public library built with Vite. When I try to import the CSS using: import 'rd-component/dist/style.css'; I encounter an error during the project build process: ERROR in ./src/page/photo/gen/GenPhot ...

cssreactjstypescriptvite

The transition from Vuetify 2 to Vuetify 3 involves replacing deprecated properties like app, clipped-left, and offset-y with the new property called "

Seeking guidance on upgrading from Vuetify/Vue 2 to 3. As a non front-end developer tasked with updating legacy code, I'm facing challenges due to the migration guide assuming CSS knowledge and lacking examples for resolving removed features. The gui ...

cssvue.jsvuejs3vuetify.jsvuetifyjs3

Divs are being obstructed by the navigation bar

I am seeking a solution to prevent div elements from being positioned below my navigation/information bar when the screen width is minimized. The information bar has a height of 1200px and I would like it to stay on the left side without any overlapping fr ...

htmlcss

What is the functionality of the keydown event?

Whenever the input text value is not empty, I want my .removetext div to be displayed, but it's not working correctly. When I type something after the second character, my .removetext gets hidden, but it shouldn't be hidden when the input is not ...

javascriptjqueryhtmlcss

Determine whether the server request originated from an Ionic mobile application

Currently, we are in the final stages of completing an Ionic project with a PHP backend. To enhance the security of our backend and protect it from external influences, we aim to restrict access to the backend only from within the Ionic project (native app ...

phphtmlcsssecurityionic-framework

Click on link after animation has finished

I'm currently facing an issue with my script not functioning correctly. The code I'm utilizing is from a resource provided by Codyhouse to implement a 3D rotating navigation menu on my webpage. Essentially, when you click the hamburger icon, it o ...

javascriptjqueryhtmlcssanimation

Tips for adjusting the dimensions of a child element to match its parent in Angular 12 with Typescript

I have included the child component in the parent component and I am displaying that child component within a col-md-8. What I want to achieve is to highlight a specific div in the child component with additional text, making it equal in size to the parent ...

cssangulartypescript

Tips for avoiding the transmission of className and style attributes to React components

Hey there! I'm working on a custom button component that needs to accept all ButtonHTMLAttributes except for className and style to avoid any conflicts with styling. I'm using TypeScript with React, but I've run into some issues trying to ac ...

htmlcssreactjstypescript

How to avoid an additional carriage return in Internet Explorer when editing a Textarea?

In Internet Explorer, we are facing an issue with a multiline textarea. After setting the content using JavaScript and checking it, everything appears correct without any additional carriage returns in the textarea: document.getElementById( 'text-ar ...

javascriptjquerycssinternet-explorer