"checked" DOM property not always being effectively set
Created by: Kolyunya
Hello! I am using the latest version of Bootstrap from this repo to render a group of checkbox buttons very much like in the demo.
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" checked> Option 1 (pre-checked)
</label>
<label class="btn btn-primary">
<input type="checkbox"> Option 2
</label>
<label class="btn btn-primary">
<input type="checkbox"> Option 3
</label>
</div>
I've noticed a constantly reproducing issue. When I click on the checkbox button the actual input's checked
DOM property sometimes is not being set correctly. That is I click on the button, the label changes it's state, BUT the firebug says that the input's DOM property was not changed. And firebug doe not lie, because when I submit the form the input value is incorrect.
The issue can be easily reproduced here. Just trigger all the checkboxed from the first line (1,2,3,4,5,6) and then look their's 'checked' DOM property. One or two of them will have incorrect values.
I've looked the source code and the problem is in this function
Button.prototype.toggle = function () {
var changed = true
var $parent = this.$element.closest('[data-toggle="buttons"]')
if ($parent.length) {
var $input = this.$element.find('input')
if ($input.prop('type') == 'radio') {
if ($input.prop('checked') && this.$element.hasClass('active')) changed = false
else $parent.find('.active').removeClass('active')
}
if (changed) $input.prop('checked', !this.$element.hasClass('active')).trigger('change')
}
if (changed) this.$element.toggleClass('active')
}
The
if (changed) $input.prop('checked', !this.$element.hasClass('active')).trigger('change')
line does not set the property for some reason. A very strange thing is that when I try to console.log($input.prop('checked'))
after this line, it logs a correct value.
Any help is greatly appreciated. Thank you.