Use form elements in checkbox and radio button groups

* Uses .btn on label elements with nested checkbox and radio controls within
* Updated examples to reflect change in HTML and CSS
* Had to add .active all buttons for proper state highlighting (mimicing the :active pseudo state)
* Still needs JavaScript plugin updated by @fat

1 files changed, 36 insertions, 12 deletions

diff --git a/docs/javascript.html b/docs/javascript.html
index bbf54b53a..e42444541 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -1172,16 +1172,28 @@ $('#my-alert').bind('closed', function () {
             <p>Add <code>data-toggle="buttons-checkbox"</code> for checkbox style toggling on btn-group.</p>
             <div class="bs-docs-example" style="padding-bottom: 24px;">
               <div class="btn-group" data-toggle="buttons-checkbox">
-                <button type="button" class="btn btn-primary">Left</button>
-                <button type="button" class="btn btn-primary">Middle</button>
-                <button type="button" class="btn btn-primary">Right</button>
+                <label class="btn btn-primary">
+                  <input type="checkbox"> Option 1
+                </label>
+                <label class="btn btn-primary">
+                  <input type="checkbox"> Option 2
+                </label>
+                <label class="btn btn-primary">
+                  <input type="checkbox"> Option 3
+                </label>
               </div>
             </div><!-- /example -->
 {% highlight html linenos %}
 <div class="btn-group" data-toggle="buttons-checkbox">
-  <button type="button" class="btn btn-primary">Left</button>
-  <button type="button" class="btn btn-primary">Middle</button>
-  <button type="button" class="btn btn-primary">Right</button>
+  <label class="btn btn-primary">
+    <input type="checkbox"> Option 1
+  </label>
+  <label class="btn btn-primary">
+    <input type="checkbox"> Option 2
+  </label>
+  <label class="btn btn-primary">
+    <input type="checkbox"> Option 3
+  </label>
 </div>
 {% endhighlight %}
 
@@ -1189,16 +1201,28 @@ $('#my-alert').bind('closed', function () {
             <p>Add <code>data-toggle="buttons-radio"</code> for radio style toggling on btn-group.</p>
             <div class="bs-docs-example" style="padding-bottom: 24px;">
               <div class="btn-group" data-toggle="buttons-radio">
-                <button type="button" class="btn btn-primary">Left</button>
-                <button type="button" class="btn btn-primary">Middle</button>
-                <button type="button" class="btn btn-primary">Right</button>
+                <label class="btn btn-primary">
+                  <input type="radio" name="options" id="option1"> Option 1
+                </label>
+                <label class="btn btn-primary">
+                  <input type="radio" name="options" id="option2"> Option 2
+                </label>
+                <label class="btn btn-primary">
+                  <input type="radio" name="options" id="option3"> Option 3
+                </label>
               </div>
             </div><!-- /example -->
 {% highlight html linenos %}
 <div class="btn-group" data-toggle="buttons-radio">
-  <button type="button" class="btn btn-primary">Left</button>
-  <button type="button" class="btn btn-primary">Middle</button>
-  <button type="button" class="btn btn-primary">Right</button>
+  <label class="btn btn-primary">
+    <input type="radio" name="options" id="option1"> Option 1
+  </label>
+  <label class="btn btn-primary">
+    <input type="radio" name="options" id="option2"> Option 2
+  </label>
+  <label class="btn btn-primary">
+    <input type="radio" name="options" id="option3"> Option 3
+  </label>
 </div>
 {% endhighlight %}