disabled

Author: okendoken

demo/build.css

@@ -12,6 +12,7 @@
     margin-left: -20px;
     border: 1px solid #cccccc;
     border-radius: 3px;
+    background-color: #fff;
     -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
     transition: border 0.15s ease-in-out, color 0.15s ease-in-out; }
   .checkbox label:after {
@@ -30,3 +31,8 @@
   .checkbox input[type=checkbox]:checked + label:after {
     font-family: 'FontAwesome';
     content: "\f00c"; }
+  .checkbox input[type=checkbox]:disabled + label {
+    opacity: 0.65; }
+    .checkbox input[type=checkbox]:disabled + label:before {
+      background-color: #eeeeee;
+      cursor: not-allowed; }

demo/index.html

@@ -11,13 +11,30 @@
 <div class="container">
     <h2>Basic controls</h2>
     <form role="form">
-        <div class="checkbox">
-            <input id="checkbox1" type="checkbox">
-            <label for="checkbox1">
-                Check me out
-            </label>
+        <div class="row">
+            <div class="col-md-4">
+                <div class="checkbox">
+                    <input id="checkbox1" type="checkbox">
+                    <label for="checkbox1">
+                        Check me out
+                    </label>
+                </div>
+            </div>
+            <div class="col-md-4">
+                <div class="checkbox">
+                    <input id="checkbox7" type="checkbox" disabled>
+                    <label for="checkbox7">
+                        Can't check this
+                    </label>
+                </div>
+                <div class="checkbox">
+                    <input id="checkbox8" type="checkbox" disabled checked>
+                    <label for="checkbox8">
+                        This too
+                    </label>
+                </div>
+            </div>
         </div>
-        <button type="submit" class="btn btn-default">Submit</button>
     </form>
 </div>
 </body>

font-awesome-checkbox.scss

@@ -14,6 +14,7 @@
       margin-left: -20px;
       border: 1px solid $input-border;
       border-radius: 3px;
+      background-color: #fff;
       @include transition(border 0.15s ease-in-out, color 0.15s ease-in-out);
     }
 
@@ -39,5 +40,14 @@
       content: $fa-var-check;
     }
 
+    &:disabled + label{
+      opacity: 0.65;
+
+      &:before{
+        background-color: $gray-lighter;
+        cursor: not-allowed;
+      }
+    }
+
   }
 }