'Bootstrap checkbox button bug

How to use the checkbox buttons feature of Bootstrap. When I use it, it doesn't seem to work properly. When I click the checkbox does not necessarily tick.

If you run the code below, and randomly click on the 3 buttons, you will find that the checkboxes have a strange behavior. Sometimes the checkboxes don't activate or deactivate.

Test under Firefox Linux (SolusOS) and Windows.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://getbootstrap.com/docs/4.5/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/fork-awesome.min.css" rel="stylesheet"/>

                        <div class="form-group form-inline justify-content-between">
                            <div class="btn-group-toggle" data-toggle="buttons">
                                <label class="btn btn-light">
                                    <input type="checkbox" class="custom-control-input" id="check1" value="1" name="check1">
                                    <i class="fa fa-5x fa-cloud-download" aria-hidden="true"></i>
                                </label>
                            </div>
                            <div class="btn-group-toggle" data-toggle="buttons">
                                <label class="btn btn-light">
                                    <input type="checkbox" class="custom-control-input" id="check2" value="1" name="check2">
                                    <i class="fa fa-5x fa-cloud-download" aria-hidden="true"></i>
                                </label>
                            </div>
                              <div class="btn-group-toggle" data-toggle="buttons">
                                <label class="btn btn-light">
                                    <input type="checkbox" class="custom-control-input" id="check3" value="1" name="check3">
                                    <i class="fa fa-5x fa-cloud-download" aria-hidden="true"></i>
                                </label>
                              </div>
                        </div>
htmlcsstwitter-bootstrap


Solution 1:[1]

Your HTML Syntax isn't correct.
First of all, you are using type="checkbox", as you can see in the bootstrap documentation it's type="radio".
And second (maybe not that important), you are using the wrapper class <div class="btn-group btn-group-toggle" data-toggle="buttons"> three times, not like one time in the documentaition.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://getbootstrap.com/docs/4.5/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/fork-awesome.min.css" rel="stylesheet"/>

                        <div class="form-group form-inline justify-content-between">
<div class="btn-group btn-group-toggle" data-toggle="buttons">

                                <label class="btn btn-light">
                                    <input type="radio" class="custom-control-input" id="wallhack" value="1" name="wallhack">
                                    <i class="fa fa-5x fa-cloud-download" aria-hidden="true"></i>
                                </label>
                                <label class="btn btn-light">
                                    <input type="radio" class="custom-control-input" id="aimbot" value="1" name="aimbot">
                                    <i class="fa fa-5x fa-cloud-download" aria-hidden="true"></i>
                                </label>
                                <label class="btn btn-light">
                                    <input type="radio" class="custom-control-input" id="other_hack" value="1" name="other_hack">
                                    <i class="fa fa-5x fa-cloud-download" aria-hidden="true"></i>
                                </label>
</div>
                        </div>

Solution 2:[2]

This is a known bug, similar to this issue with outline buttons, where the :hover state and :outline state are active when your cursor is over the button, regardless of the actual state. This makes the button appear checked when the actual state is unchecked...until you click away from the button.

Here's what I did to resolve this using the outlined style single toggle in Bootstrap 5:

CSS:

.no-hover-primary:hover { 
    background: none; 
    color: #0d6efd;
}
.no-hover-primary {
    box-shadow:none !important;
}

HTML:

<input type="checkbox" class="btn-check" id="btn-check-outlined" autocomplete="off">
<label class="btn btn-outline-primary no-hover-primary" for="btn-check-outlined">Toggle Me!</label>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 J4R
Solution 2

Related Questions