2

Bootply

I have a data-toggle checkbox group, where I'd like one (or more) of the options to be checked, yet disabled.

Is there a built-in visual style, or would I need custom CSS? This doesn't seem to work:

<div class="btn-group" data-toggle="buttons">

  <label class="btn btn-primary  disabled">
    <input class="form-control" name="beard" value="fluffy" disabled="" type="checkbox"> Fluffy
  </label>

  <label class="btn btn-primary  disabled">
    <input class="form-control" name="beard" value="scraggly" disabled="" type="checkbox"> Scraggly
  </label>

  <label class="btn btn-primary  active disabled">
    <input class="form-control" name="beard" value="pointy" disabled="" checked="" type="checkbox"> Pointy
  </label>

</div>

Functionally, I suppose the last option is checked, but visually it appears no differently than the disabled options.

Yes, I am looking for checkboxes styled as buttons (as Bootstrap does). Must avoid using any additional JS.

alexw
  • 8,468
  • 6
  • 54
  • 86
  • I think, visually, the disabled class overwrites all other BS classes. So I don't think this is possible with the default classes BS give you. You'd have to write your own. – dotty Jan 18 '15 at 23:44

1 Answers1

3

Any .btn element with .disabled will have its box-shadow removed by precedence. You can change that by adding your own simple style to be applied:

.btn.disabled.active{
    box-shadow: inset 0 3px 5px rgba(0,0,0,.275);
}

Bootply

Change the box-shadow parameters to fit your needs.

George
  • 36,413
  • 9
  • 66
  • 103
  • 2
    @JasonBassett *My* example is a fork of the example provided by the OP. – George Jan 18 '15 at 23:51
  • 2
    @JasonBassett thats how checkboxes in bootstrap look when styled as buttons. This answers the question perfectly, I'm not sure why it was downvoted. –  Jan 18 '15 at 23:52
  • I didn't downvote anyones answer but yes, I didn't catch that at first glance. He's using buttons as checkboxes. – Jason Bassett Jan 18 '15 at 23:53