CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap-4
Ramses
Ramses

Reputation: 996

Bootstrap4 toggle button

I'm using Bootstrap 4 to create a toggle button; however, on clicking the button the checkbox is not being updated, although the active class is being set.

Even calling $('.btn-group-toggle').button('toggle') sets the active state, but does not change the checked status of the checkbox. 

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-outline-secondary">
    <input type="checkbox" value="0" />
  </label>
</div>

Is there any way to set the checked status, other than writing a click() function myself?

Upvotes: 2

Views: 11704

Answers (2)

Ramses
Ramses

Reputation: 996

As Dan Brazier mentions, the HTML used is correct. I was missing the name attribute on the input, so that's why I was unable to catch it on the server. So this is the updated code:

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-outline-secondary">
    <input name="my-input-value" type="checkbox" value="0" />
  </label>
</div>

Upvotes: 1

Dan Brazier
Dan Brazier

Reputation: 81

Your code works for me - I suspect you've not got the right JS included? I second-guessed myself migrating to 4 in terms of which of the many supplied JS files I'd need to include, it's not very documented. The bootstrap.bundle.js is the catch-all one that contains everything.

Also, there are a lot of little references to dependancies or quirks in Bootstrap that aren't particularly well highlighted. So be careful to ensure you add the right aria labels etc.

Upvotes: 2

Related Questions