Bootstrap button statuses confirmed

I am trying to implement a checked state for group checkboxes in Bootstrap 3.0.2. documentation

This is the HTML code snippet:

<div class="btn-group" data-toggle="buttons">
        <label class="btn btn-default">
        <input type="checkbox" name="123" data-toggle="button"> <span class="glyphicon glyphicon-star"></span> 123
      </label>
      <label class="btn btn-default">
        <input type="checkbox" name="456"> <span class="glyphicon glyphicon-star-empty"></span> 456
      </label>
    </div>

However, the data-toggle="button" does not seem to be working correctly. Here is the jsfiddle link for reference.

Any suggestions on how to resolve this issue? Thank you.

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

To verify the input, remember to include the checked property. This won't visually show it as checked, but it's essential if you want the input to be pre-checked in a form.

<input type="checkbox" name="123" data-toggle="button" checked>

To visually show it as checked or pressed, add the .active class to the .btn label surrounding it.

 <label class="btn btn-default active">

http://jsfiddle.net/ZktYG/2/

If data-toggle="buttons" isn't working, it may be connected to this issue: https://github.com/twbs/bootstrap/issues/8816

As a workaround, you can achieve the same result using JavaScript like so:

$('.btn-group').on('input', 'change', function(){
   var checkbox = $(this);
   var label = checkbox.parent('label');
   if (checkbox.is(':checked'))  {
      label.addClass('active');
   }
   else {
      label.removeClass('active');
   }
});

Answer №2

After a few years have passed, I felt it was necessary to tackle the root cause of the issue regarding the malfunctioning data-toggle="button".

The solution involved removing the data-toggle="button" from the <input> elements.

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default">
        <input type="checkbox" name="123"> 123
    </label>
    <label class="btn btn-default">
        <input type="checkbox" name="456"> 456
    </label>
</div>

Answer №3

To resolve this issue, I created a custom attribute to store the state of the checkbox (active or not), and then I updated this value within the click event using jQuery.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active check_button" id="check1">
    <input type="checkbox" autocomplete="off" checked data-checked=true> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary check_button" id="check2">
    <input type="checkbox" autocomplete="off" data-checked=false> Checkbox 2
  </label>
  <label class="btn btn-primary check_button" id="check3">
    <input type="checkbox" autocomplete="off" data-checked=false> Checkbox 3
  </label>
</div>

For a practical demonstration, you can view the live example on this fiddle: https://jsfiddle.net/jeffbeagley/DTcHh/34024/

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

Developing Wordpress plugins involving images - path not found

I'm currently developing a WordPress plugin and encountering some issues with images. My plugin is located in wp-content/plugins/my-plugin/ directory, and within that, there's a folder named images/test.png - how can I properly reference this ima ...

cssstylesheetwordpress

Unable to retrieve HTML code from a webpage using its URL address

Currently, I am trying to retrieve the HTML code of a specific webpage located at . My initial attempts using HttpClient were unsuccessful due to exceeding request processing time. It seems like this website may have anti-bot protection in place. I attempt ...

c#htmlhttpparsinghttpclient

a gentle breeze gathers a multitude of entities rather than items

When utilizing a restful server with node.js and sending a collection of entities wrapped in one entity object (Lookups), everything seems to be functioning properly. However, the issue arises when breeze views the entities in the collection as plain objec ...

javascriptnode.jsbreeze

Encountering difficulty with installing sass

I recently attempted to install node-sass and, while the installation was successful, I encountered an issue where the code in main.scss was not automatically transferred to style.css. In an attempt to resolve this issue, I deleted all related files incl ...

cssnode.jsnpmsassnode-sass

Ensuring that a service is completely initialized before Angular injects it into the system

When Angular starts, my service fetches documents and stores them in a Map<string, Document>. I use the HttpClient to retrieve these documents. Is there a way to postpone the creation of the service until all the documents have been fetched? In ot ...

javascriptangulartypescripthttpfetch

SignalR blocking axios requests (In a Waiting State)

I am currently developing a project that involves bidding on products in Auctions with real-time updates of the bid price. With potentially thousands or even millions of users worldwide participating in the bidding process. We have implemented SignalR for ...

javascriptreactjsasp.net-core-signalr

What is the best place in Rails to add @media CSS tags?

Currently, my layout.html.erb contains some CSS rules with @media queries. <style> @media (max-width: 900px) { .green-button{ display: none!important; } .chat_button{ margin-top: 20px!important; } #myCarousel{ ...

cssruby-on-rails

Setting values and options in Material UI AutoComplete and then assigning the selected value to an object when onChange event occurs - how can it be

I am working on a project where I have a brand object with the field cat_id. When the page loads, categories are loaded into an autocomplete select. My goal now is to set the value of category id as the value for a category option in the autocomplete, an ...

javascriptreactjsselectautocompletematerial-ui

Creating TypeScript models from a JSON response in React components

My Angular 2 application retrieves a JSON string, and I am looking to map its values to a model. According to my understanding, a TypeScript model file is used to assist in mapping an HTTP Get response to an object - in this case, a class named 'Custo ...

javascriptangularjsjsontypescriptangular

Jest may come across test suites, but it discreetly disregards the individual tests

Having encountered an issue with Jest testing in a Nuxt/Vue v2 project, I found that after making some changes, the tests were no longer running. The unit tests were either passing or failing initially, but suddenly stopped running altogether. ----------|- ...

javascripttypescriptvuejs2jestjsnuxt.js

Personalized border color for radio buttons

What is the best way to change the color of my radio button along with its border color when the radio button is selected? My code is functioning properly, except for the border color when the radio button is selected. Below is the CSS code that I have ad ...

htmlreactjscsscss-selectors

Tips for evenly distributing these cards

Check out the full code on Codepen.io <div class="card-container"> <div class="card col-lg-4 col-sm-6 col-xs-12"> <div class="side">Jimmy Eat World</div> <div class="side back"><img ...

htmlcssbootstrap-4

Modify the conditions of a CSS file in Bootstrap using JavaScript

My project requires internationalization support for right-to-left languages like Arabic and Hebrew, so I need to modify some Bootstrap classes (such as col) to float right instead of left. I am using create-react-app with babel/webpack and react-bootstra ...

javascriptcssreactjswebpackreact-bootstrap

Working with React, with the choice of incorporating jsx or not

I am currently delving into the world of React and found myself able to run a simple app without using JSX. In my JavaScript file, I started with: class TestClass extends React.Component Do I really need to utilize JSX or can I just stick with JavaScript ...

javascriptreactjs

Is there a way I can replicate this expandable div?

I have successfully implemented a script that expands and collapses. However, I am facing an issue when trying to use two of these scripts on the same page. I attempted to simply add "_two" to all instances of "accordion," but it doesn't seem to be f ...

javascriptjqueryhtmlcss

What is the best way to add a media query to a <style> element?

I have implemented Skrollr for my Parallax animations, allowing me to use Parallax keyframes without writing them inline. To make the plugin utilize external stylesheets for the keyframes, it uses AJAX to locate the stylesheets imported via <link>. ...

jquerycssajaximportcss-animations

What steps should be taken to enlarge a checkbox within a table?

I need help with resizing the checkboxes that are inside a table. When I try using width:###px; height:###px;, it only seems to make them smaller, not bigger. Even when I set the values higher than the default size, the checkboxes stay the same while the d ...

htmlcsscheckboxhtml-tableresize

A guide on designing a personalized search bar for MUI-Datatables with a sleek outlined style

Check out the default UI from MUI-Datatables v4.3.0 here: https://i.stack.imgur.com/rbHgD.png I want to create a style similar to this: https://i.stack.imgur.com/AUHqC.png Just so you know, I am using the following packages: "@mui/material": &q ...

javascriptreactjsmaterial-uimui-datatable

Implementing multiline ellipsis without relying on -webkit-line-clamp

Content is dynamically loaded in this p tag. I am looking to implement text ellipsis after a specific line (for example, show text ellipsis on the 4th line if the content exceeds). p { width: 400px; height: 300px; text-align: justify; } <! ...

htmlcss

How can PHP send a variety of error messages to an Ajax/Jquery script and display them in an HTML DIV?

In an attempt to send various error messages back to an HTML DIV based on the PHP outcome, I have scoured through different resources without a solution that fits my particular case. Hopefully, someone can provide assistance with this. The scenario involv ...

phpjqueryhtmlajaxjson