{% endhighlight %}
<h3>Checkboxes and radios</h3>
- <p>Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.</p>
+ <p>Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.</p>
+ <p>A checkbox or radio with the <code>disabled</code> attribute will be styled appropriately. To have the <code><label></code> for the checkbox or radio also display a "not-allowed" cursor when the user hovers over the label, add the <code>.disabled</code> class to your <code>.radio</code>, <code>.radio-inline</code>, <code>.checkbox</code>, <code>.checkbox-inline</code>, or <code><fieldset></code>.</p>
<h4>Default (stacked)</h4>
<div class="bs-example">
<form role="form">
Option one is this and that—be sure to include why it's great
</label>
</div>
+ <div class="checkbox disabled">
+ <label>
+ <input type="checkbox" value="" disabled>
+ Option two is disabled
+ </label>
+ </div>
<br>
<div class="radio">
<label>
Option two can be something else and selecting it will deselect option one
</label>
</div>
+ <div class="radio disabled">
+ <label>
+ <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
+ Option three is disabled
+ </label>
+ </div>
</form>
</div><!-- /.bs-example -->
{% highlight html %}
Option one is this and that—be sure to include why it's great
</label>
</div>
+<div class="checkbox disabled">
+ <label>
+ <input type="checkbox" value="" disabled>
+ Option two is disabled
+ </label>
+</div>
<div class="radio">
<label>
Option two can be something else and selecting it will deselect option one
</label>
</div>
+<div class="radio disabled">
+ <label>
+ <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
+ Option three is disabled
+ </label>
+</div>
{% endhighlight %}
<h4>Inline checkboxes and radios</h4>