9

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>
thraxst
  • 685
  • 3
  • 8
  • 11
  • You can do this through javascript or jquery, but I'm curious why? What if people change their mind and want to select another? – Godinall May 07 '14 at 12:54
  • @Godinall Could you please give an example how to do it using javascript or jquery? Can't it be done by bootstrap tools? It may be useful if you want to make read only forms. –  Oct 08 '15 at 10:23
  • @baurzhan Bootstrap's JS tooling is jQuery – Mark Carpenter Jr Jan 11 '19 at 16:12

3 Answers3

8

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.

Rob Quincey
  • 2,834
  • 2
  • 38
  • 54
  • 4
    This does disable the buttons, but I am looking for a way to keep the styling as well so the user can see the button they selected. – thraxst May 07 '14 at 13:45
  • 1
    @thraxst did you ever get to a solution for this? Because I am looking for the same thing. – Chud37 Nov 26 '15 at 10:27
  • @Chud37 and thraxst Try adding this to your css: .btn-primary.active[disabled] { background-color: #e6e6e6 !important; } – THelper Oct 03 '16 at 08:21
  • what if insted of btn-group of buttons you use a div that defines btn btn-group and also uses `data-toggle="buttons" ` then use labels as actual buttons. when disabling set overall div that does toggle to `attr('data-toggle','off') ` that seems to work and keeps colours you preset over it – V H Feb 09 '17 at 22:51
3

I wanted to keep the styling too, So I left out the disabled field and just counter-acted the CSS with a new class display-only:

<div class='btn-group display-only' data-toggle='buttons'>      
    <label class='btn btn-default button-array'>Friday PM</label>
    <label class='btn btn-default button-array'>Saturday AM</label>
    <label class='btn btn-default button-array'>Graduation</label>
    <label class='btn btn-default button-array'>Saturday PM</label>
    <label class='btn btn-default button-array'>Sunday AM</label>
    <label class='btn btn-default button-array'>Sunday PM</label>
    <label class='btn btn-default button-array'>Monday AM</label>
</div>

And the CSS:

.btn-group.display-only label.btn {
    pointer-events: none;
    cursor: not-allowed;
}
.btn-group.display-only label.btn.active {
    opacity: 1;
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
    box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
}

..Seems to work well for me.

Chud37
  • 4,907
  • 13
  • 64
  • 116
1

Before v4.0.0, Bootstrap Toggle buttons do not honor .disabled or [disabled] :

https://github.com/twbs/bootstrap/issues/21237

Timothé Delion
  • 1,310
  • 12
  • 17