Disable radio button in bootstrap 3?

Question

How can I disable Bootstrap 3 radio buttons? If I start with the BS3 example and add disabled="disabled" to each input element, there are no changes in appearance or behavior:

<div class="container">
<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary active">
        <input type="radio" name="options" id="option1" autocomplete="off" checked disabled="disabled">Radio 1 (preselected)</label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option2" autocomplete="off" disabled="disabled">Radio 2</label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option3" autocomplete="off" disabled="disabled">Radio 3</label>
</div>

Demo: JSFiddle.

I guess this is because the disabled attribute is only applied to the now-invisible button and not the clickable text label, but I don't see anything in the BS3 docs about this.

Answer 1

As mentioned by @giammin in the comments to the accepted answer, setting 'disabled' on the input elements doesn't work in 3.3.6 of bootstrap. (Current version at time of publication of this answer).

I was having exactly the same issue, and my solution was to use the CSS property "pointer events". This makes sure the element and children are never a target of click events. However this is not a foolproof solution - users can still tab in and use space to click the hidden elements on a desktop browser.

.disabled-group
{
    pointer-events: none;
}

If you set this on your '.btn-group' element, you'll completely disable

<div class="btn-group disabled-group" data-toggle="buttons">
   <label class="btn btn-primary disabled">
      <input type="checkbox" autocomplete="off"> Checkbox 1 (pre-checked)
   </label>
   <label class="btn btn-primary disabled">
      <input type="checkbox" autocomplete="off"> Checkbox 2
   </label>
   <label class="btn btn-primary disabled">
     <input type="checkbox" autocomplete="off"> Checkbox 3
   </label>
</div>

The '.disabled' class is then optional - use it for graying out and 'cursor: not-allowed;' property.

The discussion of the fix solution is at this source: https://github.com/twbs/bootstrap/issues/16703

Answer 2

Add disabled class to the label like this

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary disabled">
    <input type="checkbox" autocomplete="off"> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary active disabled">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-primary disabled">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>

Here is a demo