Toggle buttons don't honor [disabled] or .disabled

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

[cvrebert]

X-Ref: #18874 (comment)
Using a pure-CSS approach would address this problem (a user cannot click/check a [disabled] <input type=checkbox>).

[PurvaA]

@toby-howell

This issue is fixed by adding custom code using jQuery

Please check my solution here: http://jsbin.com/xoruzeqehi/edit?css,output

I am attaching screen shot.

Please let me know in case of any concerns/ queries

[dcgit]

The problem appears to be related to the initial state of the hidden checkbox as the btn initalizes. When the label in your example initializes as a button control, the checkbox value is automatically set as .active and [checked], although im not sure where in the bootstrap code this happens.

A similar issue was posted and resolved 3 years ago where the inital state is not properly reflected.

[dcgit]

Also if you use a button instead of label, it appears to disable properly but the hidden checkbox still winds up with the initial state of active and checked

[dcgit]

Im wrong about the initial state. Some test code i added to your example was triggering an inital click that threw me off. I was still able to verify that if you change the label to a button it works as expected.

[Johann-S]

PR : #22499