merge

README.md

@@ -1,7 +1,7 @@
 Bootstrap-switch
 ========================
 
-You can now also use radio buttons as switches.
+You can now also use radio buttons and checkboxes as switches.
 
 
 Demo
@@ -18,7 +18,7 @@ Just include Twitter Bootstrap, jQuery, Bootstrap Switch CSS and Javascript
 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
 <script src="bootstrap-switch.js"></script>  // master
-<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/1.4/bootstrap-switch.min.js">  // from cdnjs.com
+<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/1.6/bootstrap-switch.min.js">  // from cdnjs.com
 ```
 
 Less
@@ -183,7 +183,10 @@ $('#mySwitch').bootstrapSwitch('isActive');
 $('#mySwitch').bootstrapSwitch('setActive', false);
 $('#mySwitch').bootstrapSwitch('setActive', true);
 $('#mySwitch').bootstrapSwitch('toggleState');
-$('.mySwitch').bootstrapSwitch('toggleRadioState'); // the radiobuttons need a class not a ID
+$('.mySwitch').bootstrapSwitch('toggleRadioState'); // the radiobuttons need a class not a ID, don't allow uncheck radio switch
+$('.mySwitch').bootstrapSwitch('toggleRadioStateAllowUncheck'); // don't allow uncheck radio switch
+$('.mySwitch').bootstrapSwitch('toggleRadioStateAllowUncheck', false); // don't allow uncheck radio switch
+$('.mySwitch').bootstrapSwitch('toggleRadioStateAllowUncheck', true); // allow uncheck radio switch
 $('#mySwitch').bootstrapSwitch('setState', true);
 $('#mySwitch').bootstrapSwitch('status');  // returns true or false
 $('#mySwitch').bootstrapSwitch('destroy');

examples/index.html

@@ -207,6 +207,22 @@
     </div>
 </div>
 
+<div class="row-fluid">
+    <div class="span12">
+        <h3>HTML text (mini-switch)</h3>
+
+        <div class="bs-docs-example">
+            <div class="switch switch-mini" data-on-label="<i class='switch-mini-icons icon-ok icon-white'></i>" data-off-label="<i class='switch-mini-icons icon-remove'></i>">
+                <input type="checkbox" checked />
+            </div>
+        </div>
+        <pre class="prettyprint linenums">
+&lt;div class="switch switch-mini" data-on-label="&lt;i class='switch-mini-icons icon-ok icon-white'>&lt;/i>" data-off-label="&lt;i class='switch-mini-icons icon-remove'>&lt;/i>">
+    &lt;input type="checkbox" checked />
+&lt;/div></pre>
+    </div>
+</div>
+
 <div class="row-fluid">
     <div class="span12">
         <h3>Event handler <small>javascript</small></h3>
@@ -247,7 +263,6 @@ $('#toggle-state-switch').bootstrapSwitch('setState', false); // true || false</
     </div>
 </div>
 
-
 <div class="row-fluid">
     <div class="span12">
         <h3>Destroy <small>javascript</small></h3>
@@ -281,7 +296,6 @@ $('#create-switch').wrap('&lt;div class="switch" />').parent().bootstrapSwitch()
     </div>
 </div>
 
-
 <div class="row-fluid">
     <div class="span12">
         <h3>Disabled <small>javascript</small></h3>
@@ -319,74 +333,106 @@ $('#disable-switch').bootstrapSwitch('setActive', false);  // true || false</pre
 
         <div class="bs-docs-example">
             <div class="control-group">
-                <div class="control-group">
+                 <div class="controls">
+                    <label class="control-label" for="option1">Option 1</label>
+                        <div id="option1" class="switch radio1 radio-no-uncheck">
+                            <input type="radio" name="radio1" value="option1" />
+                        </div>
+                    <label class="control-label" for="option2">Option 2</label>
+                        <div id="option2" class="switch radio1 radio-no-uncheck">
+                            <input type="radio" name="radio1" value="option2" />
+                        </div>
+                    <label class="control-label" for="option3">Option 3</label>
+                        <div id="option3" class="switch radio1 radio-no-uncheck">
+                            <input type="radio" name="radio1" value="option3" />
+                        </div>
+                 </div>
+            </div>
+        </div>
+        <pre class="prettyprint linenums">
+&lt;div class="control-group">
+    &lt;div class="controls">
+        &lt;label class="control-label" for="option1">Option 1&lt;/label>
+            &lt;div id="option1" class="switch radio1 radio-no-uncheck">
+                &lt;input type="radio" name="radio1" value="option1" />
+            &lt;/div>
+        &lt;label class="control-label" for="option2">Option 2&lt;/label>
+            &lt;div id="option2" class="switch radio1 radio-no-uncheck">
+                &lt;input type="radio" name="radio1" value="option2" />
+            &lt;/div>
+        &lt;label class="control-label" for="option3">Option 3&lt;/label>
+            &lt;div id="option3" class="switch radio1 radio-no-uncheck">
+                &lt;input type="radio" name="radio1" value="option3" />
+            &lt;/div>
+    &lt;/div>
+&lt;/div>            
+&lt;script>
+    $(document).ready(function() {
+        $('.radio1').on('switch-change', function () {
+            $('.radio1').bootstrapSwitch('toggleRadioState');
+        });
+// or
+        $('.radio1').on('switch-change', function () {
+            $('.radio1').bootstrapSwitch('toggleRadioStateAllowUncheck');
+        });
+// or
+        $('.radio1').on('switch-change', function () {
+            $('.radio1').bootstrapSwitch('toggleRadioStateAllowUncheck', false);
+        });
+    });
+&lt;/script></pre>
+    </div>
+</div>
+
+<div class="row-fluid">
+    <div class="span12">
+        <h3>Radio <small>javascript (allow radios uncheck)</small></h3>
+
+        <div class="bs-docs-example">
+            <div class="control-group">
+                 <div class="controls">
                     <label class="control-label" for="option1">Option 1</label>
-                    <div class="controls">
                         <div id="option1" class="switch radio2">
-                            <input type="radio" name="radio2" value="option1" checked />
+                            <input type="radio" name="radio2" value="option1" />
                         </div>
-                    </div>
-                </div>
-                <div class="control-group">
-                    <div>
                     <label class="control-label" for="option2">Option 2</label>
-                    </div>
-                    <div class="controls">
                         <div id="option2" class="switch radio2">
-                            <input type="radio" name="radio2" value="option2" />
+                            <input type="radio" name="radio2" value="option2" checked="checked" />
                         </div>
-                    </div>
-                </div>
-                <div class="control-group">
                     <label class="control-label" for="option3">Option 3</label>
-                    <div class="controls">
                         <div id="option3" class="switch radio2">
                             <input type="radio" name="radio2" value="option3" />
                         </div>
-                    </div>
-                </div>
+                 </div>
             </div>
         </div>
         <pre class="prettyprint linenums">
 &lt;div class="control-group">
-    &lt;div class="control-group">
+    &lt;div class="controls">
         &lt;label class="control-label" for="option1">Option 1&lt;/label>
-        &lt;div class="controls">
             &lt;div id="option1" class="switch radio2">
-                &lt;input type="radio" name="radio2" value="option1" checked />
+                &lt;input type="radio" name="radio2" value="option1" />
             &lt;/div>
-        &lt;/div>
-    &lt;/div>
-    &lt;div class="control-group">
-        &lt;div>
         &lt;label class="control-label" for="option2">Option 2&lt;/label>
-        &lt;/div>
-        &lt;div class="controls">
             &lt;div id="option2" class="switch radio2">
-                &lt;input type="radio" name="radio2" value="option2" />
+                &lt;input type="radio" name="radio2" value="option2" checked="checked" />
             &lt;/div>
-        &lt;/div>
-    &lt;/div>
-    &lt;div class="control-group">
         &lt;label class="control-label" for="option3">Option 3&lt;/label>
-        &lt;div class="controls">
             &lt;div id="option3" class="switch radio2">
                 &lt;input type="radio" name="radio2" value="option3" />
             &lt;/div>
-        &lt;/div>
     &lt;/div>
 &lt;/div>            
 &lt;script>
     $(document).ready(function() {
         $('.radio2').on('switch-change', function () {
-            $('.radio2').bootstrapSwitch('toggleRadioState');
+            $('.radio2').bootstrapSwitch('toggleRadioStateAllowUncheck', true);
         });
     });
 &lt;/script></pre>
     </div>
 </div>
 
-
 <div class="row-fluid">
     <div class="span12">
         <h3>Form <small>- try to use tab, space and reset button</small></h3>
@@ -481,7 +527,6 @@ $('#disable-switch').bootstrapSwitch('setActive', false);  // true || false</pre
 </p>
 </div>
 
-
 <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
     <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
@@ -557,7 +602,7 @@ $(document).ready(function() {
     });
 
     $('.radio2').on('switch-change', function () {
-        $('.radio2').bootstrapSwitch('toggleRadioState');
+        $('.radio2').bootstrapSwitch('toggleRadioStateAllowUncheck', true);
     });
 
 });

static/js/bootstrap-switch.js

@@ -1,5 +1,5 @@
 /*! ============================================================
- * bootstrapSwitch v1.5 by Larentis Mattia @SpiritualGuru
+ * bootstrapSwitch v1.6 by Larentis Mattia @SpiritualGuru
  * http://www.larentis.eu/
  * 
  * Enhanced for radiobuttons by Stein, Peter @BdMdesigN
@@ -16,6 +16,7 @@
   "use strict";
 
   $.fn['bootstrapSwitch'] = function (method) {
+    var inputSelector = 'input[type!="hidden"]';
     var methods = {
       init: function () {
         return this.each(function () {
@@ -71,13 +72,13 @@
             $label = $('<label>')
               .html("&nbsp;")
               .addClass(myClasses)
-              .attr('for', $element.find('input').attr('id'));
+              .attr('for', $element.find(inputSelector).attr('id'));
 
             if (icon) {
               $label.html('<i class="icon icon-' + icon + '"></i>');
             }
 
-            $div = $element.find('input').wrap($('<div>')).parent().data('animated', false);
+            $div = $element.find(inputSelector).wrap($('<div>')).parent().data('animated', false);
 
             if ($element.data('animated') !== false)
               $div.addClass('switch-animate').data('animated', true);
@@ -88,10 +89,10 @@
               .append($switchRight);
 
             $element.find('>div').addClass(
-              $element.find('input').is(':checked') ? 'switch-on' : 'switch-off'
+              $element.find(inputSelector).is(':checked') ? 'switch-on' : 'switch-off'
             );
 
-            if ($element.find('input').is(':disabled'))
+            if ($element.find(inputSelector).is(':disabled'))
               $(this).addClass('deactivate');
 
             var changeStatus = function ($this) {
@@ -114,7 +115,7 @@
               changeStatus($(this));
             });
 
-            $element.find('input').on('change', function (e, skipOnChange) {
+            $element.find(inputSelector).on('change', function (e, skipOnChange) {
               var $this = $(this)
                 , $element = $this.parent()
                 , thisState = $this.is(':checked')
@@ -149,9 +150,11 @@
 
               $this.closest('div').removeClass('switch-animate');
 
-              if ($this.closest('.has-switch').is('.deactivate'))
+              if ($this.closest('.has-switch').is('.deactivate')) {
                 $this.unbind('click');
-              else {
+              } else if ( $this.closest('.switch-on').parent().is('.radio-no-uncheck') ) {
+                $this.unbind('click');
+              } else {
                 $this.on('mousemove touchmove', function (e) {
                   var $element = $(this).closest('.switch')
                     , relativeX = (e.pageX || e.originalEvent.targetTouches[0].pageX) - $element.offset().left
@@ -214,8 +217,8 @@
               $form.bind('reset', function () {
                 setTimeout(function () {
                   $form.find('.switch').each(function () {
-                    var $input = $(this).find('input');
-                    
+                    var $input = $(this).find(inputSelector);
+
                     $input.prop('checked', $input.is(':checked')).trigger('change');
                   });
                 }, 1);
@@ -229,7 +232,7 @@
         var $this = $(this);
 
         $this.toggleClass('deactivate');
-        $this.find('input').prop('disabled', $this.is('.deactivate'));
+        $this.find(inputSelector).prop('disabled', $this.is('.deactivate'));
       },
       isActive: function () {
         return !$(this).hasClass('deactivate');
@@ -239,25 +242,35 @@
 
         if (active) {
           $this.removeClass('deactivate');
-          $this.find('input').prop('disabled', false);
+          $this.find(inputSelector).removeAttr('disabled');
         }
         else {
           $this.addClass('deactivate');
-          $this.find('input').prop('disabled', true);
+          $this.find(inputSelector).attr('disabled', 'disabled');
         }
       },
       toggleState: function (skipOnChange) {
-        var $input = $(this).find('input[type=checkbox]');
+        var $input = $(this).find(':checkbox');
         $input.prop('checked', !$input.is(':checked')).trigger('change', skipOnChange);
       },
       toggleRadioState: function (skipOnChange) {
-        $(this).find('input[type=radio]').not(':checked').trigger('change', skipOnChange);
+        var $radioinput = $(this).find(':radio');
+          $radioinput.not(':checked').prop('checked', !$radioinput.is(':checked')).trigger('change', skipOnChange);
+      },
+      toggleRadioStateAllowUncheck: function (uncheck, skipOnChange) {
+        var $radioinput = $(this).find(':radio');
+        if (uncheck) {
+          $radioinput.not(':checked').trigger('change', skipOnChange);
+        }
+        else {
+          $radioinput.not(':checked').prop('checked', !$radioinput.is(':checked')).trigger('change', skipOnChange);
+        }
       },
       setState: function (value, skipOnChange) {
-        $(this).find('input').prop('checked', value).trigger('change', skipOnChange);
+        $(this).find(inputSelector).prop('checked', value).trigger('change', skipOnChange);
       },
       status: function () {
-        return $(this).find('input').is(':checked');
+        return $(this).find(inputSelector).is(':checked');
       },
       destroy: function () {
         var $element = $(this)
@@ -265,7 +278,7 @@
           , $form = $element.closest('form')
           , $inputbox;
 
-        $div.find(':not(input)').remove();
+        $div.find(':not(input[type!="hidden"])').remove();
 
         $inputbox = $div.children();
         $inputbox.unwrap().unwrap();
@@ -290,6 +303,8 @@
   };
 }(jQuery);
 
-(function () {
-  jQuery('.switch')['bootstrapSwitch']();
-})();
+(function($) {  // creates scope for $ sign assigned to jQuery
+    $(function () { // on dom ready
+        $('.switch')['bootstrapSwitch'](); // attach bootstrapswitch
+    });
+})(jQuery);

static/less/bootstrap-switch.less

@@ -1,5 +1,5 @@
 /* ============================================================
- * bootstrapSwitch v1.5 by Larentis Mattia @SpiritualGuru
+ * bootstrapSwitch v1.6 by Larentis Mattia @SpiritualGuru
  * http://www.larentis.eu/
  *
  * Enhanced for radiobuttons by Stein, Peter @BdMdesigN
@@ -109,7 +109,7 @@
   }
 
   label {
-  	text-align: center;
+    text-align: center;
     margin-top: -1px;
     margin-bottom: -1px;
     z-index: 100;

static/stylesheets/bootstrap-switch.css

@@ -1,5 +1,5 @@
 /* ============================================================
- * bootstrapSwitch v1.5 by Larentis Mattia @SpiritualGuru
+ * bootstrapSwitch v1.6 by Larentis Mattia @SpiritualGuru
  * http://www.larentis.eu/
  *
  * Enhanced for radiobuttons by Stein, Peter @BdMdesigN
@@ -33,6 +33,15 @@
 .has-switch.switch-mini {
   min-width: 72px;
 }
+.has-switch.switch-mini i.switch-mini-icons {
+  height: 1.20em;
+  line-height: 9px;
+  vertical-align: text-top;
+  text-align: center;
+  transform: scale(0.6);
+  margin-top: -1px;
+  margin-bottom: -1px;
+}
 .has-switch.switch-small {
   min-width: 80px;
 }