Bootstrap: Checkbox and radio buttons doesn't change underlying input checked state

[wisamx]

Windows 10
Google Chrome Version 66.0.3359.117 (Official Build) (64-bit)

if I try to access the official documentation at:
https://getbootstrap.com/docs/4.1/components/buttons/#checkbox-and-radio-buttons

and inspect the radio input, then its state doesn't change, although the visual work well.

[Johann-S]

But the value change see: https://codepen.io/Johann-S/pen/GBqoZG?editors=1111

And open your console 😉

[patrickhlauke]

I often see this causing confusion when debugging our (admittedly quite brittle) radio/checkbox implementation...but it applies to all radio/checkbox inputs in general (even in vanilla HTML): it's pointless looking in the DOM inspector/view in your developer tools to see if the "checked" attribute is present or changed. this does not change. it's the .checked property of the DOM object that gets changed, and this is not reflected in the document view itself.

what can also be confusing is that visually, when you check/uncheck something, it's not only showing the visual checked/unchecked state, but it's also at that point focused, so showing the styling for focus too. another less-than-ideal aspect of our current implementation.

but, tl;dr: it does seem to behave correctly.

[wisamx]

I am having this real problem when using bootstrap 4 toggle with vue.js

1. If I use this code then the binding doesn't work

<div class="btn-group btn-group-toggle mb-2 float-right" data-toggle="buttons">
            <label class="btn btn-info active">
                <input type="radio" id="d-list-view" name="d-view-switch" autocomplete="off" v-bind:value="false" v-model="tableview"><i class="fa fa-list"></i>
            </label>
            <label class="btn btn-info">
                <input type="radio" id="d-table-view" name="d-view-switch" autocomplete="off" v-bind:value="true" v-model="tableview" checked><i class="fa fa-table"></i>
            </label>
</div>

1. if I delete tags, and keep only the input elemts (using original radio function), the binding works.

<input type="radio" id="d-list-view" name="d-view-switch" autocomplete="off" v-bind:value="false" v-model="tableview"><i class="fa fa-list"></i>
<input type="radio" id="d-table-view" name="d-view-switch" autocomplete="off" v-bind:value="true" v-model="tableview" checked><i class="fa fa-table"></i>

1. if I remove only the data-toggle="buttons" then the visual doesn't work, but the binding works well.

**<div class="btn-group btn-group-toggle mb-2 float-right">**
            <label class="btn btn-info active">
                <input type="radio" id="d-list-view" name="d-view-switch" autocomplete="off" v-bind:value="false" v-model="tableview"><i class="fa fa-list"></i>
            </label>
            <label class="btn btn-info">
                <input type="radio" id="d-table-view" name="d-view-switch" autocomplete="off" v-bind:value="true" v-model="tableview" checked><i class="fa fa-table"></i>
            </label>
</div>

[mdo]

Missed closing this one. Can't speak to Vue.js, but the built-in components are behaving correctly I believe.

[cbrianball]

I know this issue is closed, but leaving this here as I think I figured out what's going on. Frameworks (like knockout and vue) rely on listening to the change event of the radio button, but the DOM event is not being raised; however, a jQuery change event IS being raised, so if you can find a way to subscribe to that and update your value, it should work (though not ideal).

[gokigoks]

Hi @cbrianball , How do I subscribe to jQuery events? I encountered the problem using vue with the same circumstance..

[cbrianball]

jQuery has its own event system. So if you subscribe to a DOM event using document.getElementById(...).addEventListener('change', ...), your callback will be invoked whenever a DOM event by that name happens, but NOT when a jQuery event by that name happens.

If you subscribe to an event using $(...).on('change', ...), then your callback will be invoked for any DOM or jQuery event that matches the event name you've provided.

[StreiffBerenice]

I tested this component with nvda 2019 and I agree with you : Checkbox and radio buttons doesn't change underlying input checked state.