Merge pull request #13745 from twbs/fix-13281

set not-allowed cursor on disabled radio+checkbox labels
twbs · Jun 8, 2014 · 7231efa · 7231efa
2 parents 5fd8ca9 + dd7ee51
commit 7231efa
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 12 deletions.
diff --git a/dist/css/bootstrap.css b/dist/css/bootstrap.css
diff --git a/docs/_includes/css/forms.html b/docs/_includes/css/forms.html
@@ -207,7 +207,8 @@ <h3>Textarea</h3>
 {% 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>&lt;label&gt;</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>&lt;fieldset&gt;</code>.</p>
   <h4>Default (stacked)</h4>
   <div class="bs-example">
     <form role="form">
@@ -217,6 +218,12 @@ <h4>Default (stacked)</h4>
           Option one is this and that&mdash;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>
@@ -230,6 +237,12 @@ <h4>Default (stacked)</h4>
           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 %}
@@ -239,6 +252,12 @@ <h4>Default (stacked)</h4>
     Option one is this and that&mdash;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>
@@ -252,6 +271,12 @@ <h4>Default (stacked)</h4>
     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>

diff --git a/less/forms.less b/less/forms.less
@@ -247,19 +247,35 @@ input[type="month"] {
 }
 
 // Apply same disabled cursor tweak as for inputs
+// Some special care is needed because <label>s don't inherit their parent's `cursor`.
 //
 // Note: Neither radios nor checkboxes can be readonly.
 input[type="radio"],
-input[type="checkbox"],
-.radio,
+input[type="checkbox"] {
+  &[disabled],
+  &.disabled,
+  fieldset[disabled] & {
+    cursor: not-allowed;
+  }
+}
+// These classes are used directly on <label>s
 .radio-inline,
-.checkbox,
 .checkbox-inline {
-  &[disabled],
+  &.disabled,
   fieldset[disabled] & {
     cursor: not-allowed;
   }
 }
+// These classes are used on elements with <label> descendants
+.radio,
+.checkbox {
+  &.disabled,
+  fieldset[disabled] & {
+    label {
+      cursor: not-allowed;
+    }
+  }
+}
 
 
 // Form control sizing