Bootstrap: Toggle buttons (label) don't honor .disabled

[dkwebtec]

Third option still clickable (gets the active class)

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-secondary disabled">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>

[ysds]

You must add disabled attribute to the input too. Should be documented about this?

[ysds]

wow! disabled attribute doesn't seem to be working.
https://codepen.io/anon/pen/WBaeoj

[dkwebtec]

OK, thanks. that works.

but still there is a issue. clicking the disabled radio unchecks the active radio because there is no check for disabled attribute or class

button.js

        if (input.type === 'radio') {
          if (input.checked &&
            this._element.classList.contains(ClassName.ACTIVE)) {
            triggerChangeEvent = false
          } else {
            const activeElement = rootElement.querySelector(Selector.ACTIVE)

            if (activeElement) {
              $(activeElement).removeClass(ClassName.ACTIVE)
            }
          }
        }

[ysds]

Confirmed on mac + Chrome, but cannot reproduce on iOS.

[patrickhlauke]

the custom radio/checkbox buttons are all sorts of messed up. hopefully this will fix it https://github.com/twbs/bootstrap/pull/28834 (worth retesting this once it lands)

[florianlacreuse]

@patrickhlauke According to my quick tests on the live documentation from your PR #28834, I wasn't able to select a disabled toggle button (can reproduce the issue with BS 4.3.1 on Fedora + Chrome).

Also, maybe we can add a disabled toggle button as an example in the documentation? I can do it if you want.

[patrickhlauke]

@patrickhlauke According to my quick tests on the live documentation from your PR #28834, I wasn't able to select a disabled toggle button (can reproduce the issue with BS 4.3.1 on Fedora + Chrome).

As in that PR would fix this? If so, cool. Still need to write up some extra unit tests for that, it seems, but I'll add a note that the PR fixes this too.

Also, maybe we can add a disabled toggle button as an example in the documentation? I can do it if you want.

If you could, that'd be fantastic. Yes, our docs lack a few more prominent examples like that.

[florianlacreuse]

To be more accurate: in my case, with BS 4.3.1, clicking on a disabled toggle button remove the active on the previous/current active button toggle without adding it on the disabled toggle button. Using the code proposed by your PR, the active toggle button don't lose the active status when I click on a disabled toggle button. Again, this is just some quick tests on my side, this need to be double checked and hard tested.

Will try to do a PR about the documention as mentioned.