1

I have a button-group like the one on the picture:

enter image description here

and the code like this:

<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>

How do I disable this control completely? When I added bootstrap class .disabled and/or attribute disabled to any or all of these elements I still could click on the buttons and they were affected even though bootstrap was showing the crossed circle icon.

I found here a workaround that stops events propagation, however it works only to prevent adding active class to the buttons but not focus.

$('.btn-group .btn.disabled').click(function(event) {
  event.stopPropagation();
});
Ivan Yurchenko
  • 3,762
  • 1
  • 21
  • 35

1 Answers1

1
 $('.btn-group .btn.disabled').click(function(event) {
     return false;
});
Thamaraiselvam
  • 6,961
  • 8
  • 45
  • 71
Tomasz Ćwik
  • 11
  • 1