Disable Twitter Bootstrap Button Group

Question

I have a button group on a page that is used for a selection. After the selection is made I want the button group to still be visible so the user can see the selection they made, but I don't want them to be able to use it anymore. Is there a way to disable to the button group?

<div class="btn-group-vertical">
    <button type="button" class="btn btn-primary btn-lg">Option 1</button>
    <button type="button" class="btn btn-primary btn-lg">Option 2</button>
    <button type="button" class="btn btn-primary btn-lg">Option 3</button>
</div>

Answer 1

You can use the disabled attribute on the buttons to disable their use, as described in the Bootstrap docs. It essentially involves adding the attribute 'disabled' to the button element, like so;

<div class="btn-group-vertical">
    <button type="button" class="btn btn-primary btn-lg" disabled="disabled">Option 1</button>
    <button type="button" class="btn btn-primary btn-lg" disabled="disabled">Option 2</button>
    <button type="button" class="btn btn-primary btn-lg" disabled="disabled">Option 3</button>
</div>

You can use jQuery to dynamically add this attribute once you've done whatever you want to do

$('.btn-group-vertical button').attr('disabled','disabled');

And if you wanted to re-enable it

$('.btn-group-vertical button').removeAttr('disabled');

Bear in mind that the above would apply this behaviour to all button groups with this class name. If you don't want that you'll need to add an ID to the btn group div and use that in the jQuery selector.