Bootstrap: disabled in btn-group (checkboxes or radios) on data-toggle=buttons

[vasena]

while I use disable class, I still can click on button even i rewrite onclick rule.
this is example to easy understand what I want to do

<div class="btn-group" data-toggle="buttons" id="offer_payment">
  <label class="btn btn-default active"><input type="radio" name="offer[payment]" value="1" checked="checked" />Наличными</label>
  <label class="btn btn-default disabled" onclick="alert('Способ оплаты временно недоступен');"><input type="radio" name="offer[payment]" value="2" disabled="disabled" />Банковской картой</label>
  <label class="btn btn-default disabled" onclick="alert('Способ оплаты временно недоступен');"><input type="radio" name="offer[payment]" value="3" disabled="disabled" />Электронными деньгами</label>
</div>

PS sorry for my english

[kkirsche]

What Browser and Operating System are you using?

I can't duplicate this on Chrome 40.0.2214.93 in Mac OS X 10.10.1 (14B25)

JSFiddle | JSBin

[mdo]

The use of .disabled doesn't affect our JS as far as I know. It simply styles the button to _look_ disabled. You have to do the disabling yourself. (The .disabled class is a helper to augment the lack of a global disabled boolean attribute on all HTML elements, which is the only real way to disable an element.)

[patrickhlauke]

See also http://getbootstrap.com/css/#forms-control-disabled

[JacobEvelyn]

If I'm interpreting @vasena's issue correctly, this is happening for me too. Reproducible JSFiddle: http://jsfiddle.net/omaw2qo2/3/

[twbs-lmvtfy]

Hi @JacobEvelyn!

You appear to have posted a live example (http://fiddle.jshell.net/omaw2qo2/3/show/light/), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:

• line 16, column 7: W013: Bootstrap version might be outdated. Latest version is at least 3.3.5 ; saw what appears to be usage of Bootstrap 3.3.2

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(_Please note that this is a fully automated comment._)

[JacobEvelyn]

Updated version to appease the lmvtfy linter: http://jsfiddle.net/omaw2qo2/4/

And here's a slightly more obvious example: http://jsfiddle.net/omaw2qo2/7/

[apyrkh]

The same issue as in @JacobEvelyn's example

[Siyfion]

It would certainly be nice if this disabled state was supported in the library.

[nicolasbeauvais]

I had the same issue, I used this small jQuery workaround that prevent bootstrap to change checked attributes on buttons with .disabled class:

$('.btn-group .btn.disabled').click(function(event) {
  event.stopPropagation();
});

[GithubAUndinaabOceano]

try this:

d3.select("#Zoom_On_id").attr('data-toggle', "");

[GMSBSghost]

I have the same issue with Bootstrap v3.3.7.
To me it seems that the following edit to https://github.com/twbs/bootstrap/blob/v3.3.7/js/button.js would fix the issue. Insert this between line 57 and 58 of "bootstrap/button.js":

if ($input.prop('disabled')) {
       return;
}