Our website is currently built around Bootstrap 4.6.2 and jQuery 3.6.3.
I have an HTML that contains a pair of settings, one of which is in a collapsed <div>:
<div class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox" id="a" />
<label class="custom-control-label" for="a" data-toggle="collapse" data-target="#b" aria-controls="b" aria-expanded="false">Initial Visible Setting</label>
</div>
<div id="b" class="collapse">
<div class="form-group">
<label class="sr-only" for="c">Conditionally Hidden Setting</label>
<input class="form-control" type="text" id="c" />
</div>
</div>
When I drag/highlight the label of the first checkbox, it causes the collapse being toggled without actually toggling the checkbox.
How can I prevent the collapse from running until the :checked state of the checkbox has changed?
You should place the data-toggle="collapse" attribute in the <input> element instead of the <label> element.
So that it only triggers the collapse (element) when the user (un)ticks the checkbox.
<div class="custom-control custom-checkbox">
<input
class="custom-control-input"
type="checkbox"
id="a"
data-toggle="collapse"
data-target="#b"
aria-controls="b"
aria-expanded="false"
/>
<label class="custom-control-label" for="a">Initial Visible Setting</label>
</div>