Toggle buttons don't honor [disabled] or .disabled
Created by: toby-howell
There doesn't appear to be a clean way to disable a button state toggler. I've tried the following:
<div class="btn-group disabled" data-toggle="buttons" aria-disabled="true" disabled>
<label class="btn btn-danger disabled" aria-disabled="true" disabled>
<input type="checkbox" aria-disabled="true" autocomplete="off" disabled class="disabled"/>
Click me a few times
</label>
</div>
This button appears disabled but .active
is added/removed when it is clicked and the checkbox's checked state is toggled.
I have worked around this by listening for the click
event and cancelling it if the <input>
is disabled, but I hoped that there would be a nicer way to accomplish this. If this behaviour is not a bug, consider this to be a feature request.
- Operating system: Windows 10 Pro x64
- Browser: Chrome 54.0.2840.99 m
- Test case and workaround: https://jsbin.com/veyamuwuwu
The .btn-danger
in the above test case exhibits the behaviour described. The .btn-success
is an example of the currently necessary workaround.
This was encountered in Bootstrap v4.0.0-alpha.5.