I am dealing with a button-group that resembles the one shown in the image below:
https://i.sstatic.net/U2AXN.png
The code for this button-group is as follows:
<span class="btn-group" data-toggle="buttons">
<span class="btn btn-default active">
<input type="radio" value="false"><label >No</label>
</span>
<span class="btn btn-default">
<input type="radio" value="true"><label >Yes</label>
</span>
</span>
My challenge is to disable this entire control. Despite adding the bootstrap class .disabled and/or the attribute disabled to the elements, I found that the buttons could still be clicked and acted upon, although Bootstrap displayed a crossed circle icon.
After researching, I came across a workaround mentioned here, which helped in preventing the addition of the active class to the buttons but did not address the issue with focus.
$('.btn-group .btn.disabled').click(function(event) {
event.stopPropagation();
});