fixed missing width on init (close #376), fixed indeterminate removal, added examples,

dist/js/bootstrap-switch.js

@@ -109,7 +109,7 @@
         if (this.options.indeterminate) {
           this.$element.prop("indeterminate", true);
         }
-        this._width();
+        this._initWidth();
         this._containerPosition(this.options.state, (function(_this) {
           return function() {
             if (_this.options.animate) {
@@ -134,7 +134,7 @@
         if (this.options.disabled || this.options.readonly) {
           return this.$element;
         }
-        if (this.options.state && !this.options.radioAllOff && this.$element.is(':radio')) {
+        if (this.options.state && !this.options.radioAllOff && this.$element.is(":radio")) {
           return this.$element;
         }
         if (this.options.indeterminate) {
@@ -179,9 +179,10 @@
           return this.options.animate;
         }
         value = !!value;
-        this.options.animate = value;
-        this.$wrapper[value ? "addClass" : "removeClass"]("" + this.options.baseClass + "-animate");
-        return this.$element;
+        if (value === this.options.animate) {
+          return this.$element;
+        }
+        return this.toggleAnimate();
       };
 
       BootstrapSwitch.prototype.toggleAnimate = function() {
@@ -195,10 +196,10 @@
           return this.options.disabled;
         }
         value = !!value;
-        this.options.disabled = value;
-        this.$element.prop("disabled", value);
-        this.$wrapper[value ? "addClass" : "removeClass"]("" + this.options.baseClass + "-disabled");
-        return this.$element;
+        if (value === this.options.disabled) {
+          return this.$element;
+        }
+        return this.toggleDisabled();
       };
 
       BootstrapSwitch.prototype.toggleDisabled = function() {
@@ -213,10 +214,10 @@
           return this.options.readonly;
         }
         value = !!value;
-        this.options.readonly = value;
-        this.$element.prop("readonly", value);
-        this.$wrapper[value ? "addClass" : "removeClass"]("" + this.options.baseClass + "-readonly");
-        return this.$element;
+        if (value === this.options.readonly) {
+          return this.$element;
+        }
+        return this.toggleReadonly();
       };
 
       BootstrapSwitch.prototype.toggleReadonly = function() {
@@ -231,36 +232,29 @@
           return this.options.indeterminate;
         }
         value = !!value;
-        this.options.indeterminate = value;
-        this.$element.prop("indeterminate", value);
-        this.$wrapper[value ? "addClass" : "removeClass"]("" + this.options.baseClass + "-indeterminate");
-        this._containerPosition();
-        return this.$element;
+        if (value === this.options.indeterminate) {
+          return this.$element;
+        }
+        return this.toggleIndeterminate();
       };
 
       BootstrapSwitch.prototype.toggleIndeterminate = function() {
         this.options.indeterminate = !this.options.indeterminate;
-        this.$element.prop("indeterminate", !this.options.indeterminate);
+        this.$element.prop("indeterminate", this.options.indeterminate);
         this.$wrapper.toggleClass("" + this.options.baseClass + "-indeterminate");
         this._containerPosition();
         return this.$element;
       };
 
       BootstrapSwitch.prototype.inverse = function(value) {
-        var $off, $on;
         if (typeof value === "undefined") {
           return this.options.inverse;
         }
         value = !!value;
-        this.$wrapper[value ? "addClass" : "removeClass"]("" + this.options.baseClass + "-inverse");
-        $on = this.$on.clone(true);
-        $off = this.$off.clone(true);
-        this.$on.replaceWith($off);
-        this.$off.replaceWith($on);
-        this.$on = $off;
-        this.$off = $on;
-        this.options.inverse = value;
-        return this.$element;
+        if (value === this.options.inverse) {
+          return this.$element;
+        }
+        return this.toggleInverse();
       };
 
       BootstrapSwitch.prototype.toggleInverse = function() {
@@ -377,6 +371,10 @@
         if (typeof value === "undefined") {
           return this.options.radioAllOff;
         }
+        value = !!value;
+        if (value === this.options.radioAllOff) {
+          return this.$element;
+        }
         this.options.radioAllOff = value;
         return this.$element;
       };
@@ -438,6 +436,21 @@
         return this.$wrapper.width(this._handleWidth + this._labelWidth);
       };
 
+      BootstrapSwitch.prototype._initWidth = function() {
+        var widthInterval;
+        if (this.$wrapper.is(":visible")) {
+          return this._width();
+        }
+        return widthInterval = window.setInterval((function(_this) {
+          return function() {
+            if (_this.$wrapper.is(":visible")) {
+              _this._width();
+              return window.clearInterval(widthInterval);
+            }
+          };
+        })(this), 50);
+      };
+
       BootstrapSwitch.prototype._containerPosition = function(state, callback) {
         if (state == null) {
           state = this.options.state;

docs/js/main.js

@@ -1,6 +1,7 @@
 $(function() {
   var $window = $(window);
   var sectionTop = $('.top').outerHeight() + 20;
+  var $createDestroy = $('#switch-create-destroy');
 
   // initialize highlight.js
   hljs.initHighlightingOnLoad();
@@ -27,33 +28,29 @@ $(function() {
   });
 
   // initialize all the inputs
-  $('input[type="checkbox"],[type="radio"]')
-  .not('#create-switch')
-  .not('#events-switch')
-  .not('#switch-modal')
-  .bootstrapSwitch();
+  $('input[type="checkbox"], input[type="radio"]:not("#switch-create-destroy, #switch-modal")').bootstrapSwitch();
 
-  $('[data-get]').on("click", function() {
-    var type = $(this).data('get');
+  $('[data-switch-get]').on("click", function() {
+    var type = $(this).data('switch-get');
 
     alert($('#switch-' + type).bootstrapSwitch(type));
   });
 
-  $('[data-set]').on('click', function() {
-    var type = $(this).data('set');
+  $('[data-switch-set]').on('click', function() {
+    var type = $(this).data('switch-set');
 
-    $('#switch-' + type).bootstrapSwitch(type, $(this).data('value'));
+    $('#switch-' + type).bootstrapSwitch(type, $(this).data('switch-value'));
   });
 
-  $('[data-toggle]').on('click', function() {
-    var type = $(this).data('toggle');
+  $('[data-switch-toggle]').on('click', function() {
+    var type = $(this).data('switch-toggle');
 
     $('#switch-' + type).bootstrapSwitch('toggle' + type.charAt(0).toUpperCase() + type.slice(1));
   });
 
-  $('[data-set-value]').on('input', function(event) {
+  $('[data-switch-set-value]').on('input', function(event) {
     event.preventDefault();
-    var type = $(this).data('set-value');
+    var type = $(this).data('switch-set-value');
     var value = $.trim($(this).val());
 
     if ($(this).data('value') == value) {
@@ -63,11 +60,12 @@ $(function() {
     $('#switch-' + type).bootstrapSwitch(type, value);
   });
 
-  $('#modal-switch')
-  .on("shown.bs.modal", function() {
-    $('#switch-modal').bootstrapSwitch();
-  })
-  .on("hidden.bs.modal", function() {
-    $('#switch-modal').bootstrapSwitch('destroy');
+  $('[data-switch-create-destroy]').on('click', function() {
+    var isSwitch = $createDestroy.data('bootstrap-switch');
+
+    $createDestroy.bootstrapSwitch(isSwitch ? 'destroy' : null);
+    $(this).button(isSwitch ? 'reset' : 'destroy');
   });
+
+  $('#modal-switch');
 });

examples.html

@@ -64,13 +64,13 @@
         <div class="col-sm-6 col-lg-4">
           <h2 class="h4">State</h2>
           <p>
-            <input id="switch-state" type="checkbox">
+            <input id="switch-state" type="checkbox" checked>
           </p>
           <div class="btn-group">
-            <button type="button" data-toggle="state" class="btn btn-default">Toggle</button>
-            <button type="button" data-set="state" data-value="true" class="btn btn-default">Set true</button>
-            <button type="button" data-set="state" data-value="false" class="btn btn-default">Set false</button>
-            <button type="button" data-get="state" class="btn btn-default">Get</button>
+            <button type="button" data-switch-toggle="state" class="btn btn-default">Toggle</button>
+            <button type="button" data-switch-set="state" data-switch-value="true" class="btn btn-default">Set true</button>
+            <button type="button" data-switch-set="state" data-switch-value="false" class="btn btn-default">Set false</button>
+            <button type="button" data-switch-get="state" class="btn btn-default">Get</button>
           </div>
         </div>
         <div class="col-sm-6 col-lg-4">
@@ -79,11 +79,11 @@
             <input id="switch-size" type="checkbox" checked data-size="mini">
           </p>
           <div class="btn-group">
-            <button type="button" data-set="size" data-value="mini" class="btn btn-default">Mini</button>
-            <button type="button" data-set="size" data-value="small" class="btn btn-default">Small</button>
-            <button type="button" data-set="size" data-value="normal" class="btn btn-default">Normal</button>
-            <button type="button" data-set="size" data-value="large" class="btn btn-default">Large</button>
-            <button type="button" data-get="size" class="btn btn-default">Get</button>
+            <button type="button" data-switch-set="size" data-switch-value="mini" class="btn btn-default">Mini</button>
+            <button type="button" data-switch-set="size" data-switch-value="small" class="btn btn-default">Small</button>
+            <button type="button" data-switch-set="size" data-switch-value="normal" class="btn btn-default">Normal</button>
+            <button type="button" data-switch-set="size" data-switch-value="large" class="btn btn-default">Large</button>
+            <button type="button" data-switch-get="size" class="btn btn-default">Get</button>
           </div>
         </div>
         <div class="col-sm-6 col-lg-4">
@@ -92,8 +92,8 @@
             <input id="switch-animate" type="checkbox" checked>
           </p>
           <p>
-            <button type="button" data-toggle="animate" class="btn btn-default">Toggle</button>
-            <button type="button" data-get="animate" class="btn btn-default">Get</button>
+            <button type="button" data-switch-toggle="animate" class="btn btn-default">Toggle</button>
+            <button type="button" data-switch-get="animate" class="btn btn-default">Get</button>
           </p>
         </div>
         <div class="col-sm-6 col-lg-4">
@@ -102,8 +102,8 @@
             <input id="switch-disabled" type="checkbox" checked disabled>
           </p>
           <p>
-            <button type="button" data-toggle="disabled" class="btn btn-default">Toggle</button>
-            <button type="button" data-get="disabled" class="btn btn-default">Get</button>
+            <button type="button" data-switch-toggle="disabled" class="btn btn-default">Toggle</button>
+            <button type="button" data-switch-get="disabled" class="btn btn-default">Get</button>
           </p>
         </div>
         <div class="col-sm-6 col-lg-4">
@@ -112,8 +112,8 @@
             <input id="switch-readonly" type="checkbox" checked readonly>
           </p>
           <p>
-            <button type="button" data-toggle="readonly" class="btn btn-default">Toggle</button>
-            <button type="button" data-get="readonly" class="btn btn-default">Get</button>
+            <button type="button" data-switch-toggle="readonly" class="btn btn-default">Toggle</button>
+            <button type="button" data-switch-get="readonly" class="btn btn-default">Get</button>
           </p>
         </div>
         <div class="col-sm-6 col-lg-4">
@@ -122,8 +122,8 @@
             <input id="switch-indeterminate" type="checkbox" checked data-indeterminate="true">
           </p>
           <p>
-            <button type="button" data-toggle="indeterminate" class="btn btn-default">Toggle</button>
-            <button type="button" data-get="indeterminate" class="btn btn-default">Get</button>
+            <button type="button" data-switch-toggle="indeterminate" class="btn btn-default">Toggle</button>
+            <button type="button" data-switch-get="indeterminate" class="btn btn-default">Get</button>
           </p>
         </div>
         <div class="col-sm-6 col-lg-4">
@@ -132,8 +132,8 @@
             <input id="switch-inverse" type="checkbox" checked data-inverse="true">
           </p>
           <p>
-            <button type="button" data-toggle="inverse" class="btn btn-default">Toggle</button>
-            <button type="button" data-get="inverse" class="btn btn-default">Get</button>
+            <button type="button" data-switch-toggle="inverse" class="btn btn-default">Toggle</button>
+            <button type="button" data-switch-get="inverse" class="btn btn-default">Get</button>
           </p>
         </div>
         <div class="col-sm-6 col-lg-4">
@@ -145,14 +145,14 @@
             <div class="btn-group">
               <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">Set &nbsp;<span class="caret"></span></button>
               <div role="menu" class="dropdown-menu">
-                <li><a data-set="onColor" data-value="primary">Primary</a></li>
-                <li><a data-set="onColor" data-value="info">Info</a></li>
-                <li><a data-set="onColor" data-value="success">Success</a></li>
-                <li><a data-set="onColor" data-value="warning">Warning</a></li>
-                <li><a data-set="onColor" data-value="default">Default</a></li>
+                <li><a data-switch-set="onColor" data-switch-value="primary">Primary</a></li>
+                <li><a data-switch-set="onColor" data-switch-value="info">Info</a></li>
+                <li><a data-switch-set="onColor" data-switch-value="success">Success</a></li>
+                <li><a data-switch-set="onColor" data-switch-value="warning">Warning</a></li>
+                <li><a data-switch-set="onColor" data-switch-value="default">Default</a></li>
               </div>
             </div>
-            <button type="button" data-get="onColor" class="btn btn-default">Get</button>
+            <button type="button" data-switch-get="onColor" class="btn btn-default">Get</button>
           </p>
         </div>
         <div class="col-sm-6 col-lg-4">
@@ -164,14 +164,14 @@
             <div class="btn-group">
               <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">Set &nbsp;<span class="caret"></span></button>
               <div role="menu" class="dropdown-menu">
-                <li><a data-set="offColor" data-value="primary">Primary</a></li>
-                <li><a data-set="offColor" data-value="info">Info</a></li>
-                <li><a data-set="offColor" data-value="success">Success</a></li>
-                <li><a data-set="offColor" data-value="warning">Warning</a></li>
-                <li><a data-set="offColor" data-value="default">Default</a></li>
+                <li><a data-switch-set="offColor" data-switch-value="primary">Primary</a></li>
+                <li><a data-switch-set="offColor" data-switch-value="info">Info</a></li>
+                <li><a data-switch-set="offColor" data-switch-value="success">Success</a></li>
+                <li><a data-switch-set="offColor" data-switch-value="warning">Warning</a></li>
+                <li><a data-switch-set="offColor" data-switch-value="default">Default</a></li>
               </div>
             </div>
-            <button type="button" data-get="offColor" class="btn btn-default">Get</button>
+            <button type="button" data-switch-get="offColor" class="btn btn-default">Get</button>
           </p>
         </div>
         <div class="col-sm-6 col-lg-4">
@@ -181,7 +181,7 @@
           </p>
           <div class="row">
             <div class="col-sm-6">
-              <input type="text" data-set-value="onText" value="Yes" class="form-control">
+              <input type="text" data-switch-set-value="onText" value="Yes" class="form-control">
             </div>
           </div>
         </div>
@@ -192,7 +192,7 @@
           </p>
           <div class="row">
             <div class="col-sm-6">
-              <input type="text" data-set-value="offText" value="No" class="form-control">
+              <input type="text" data-switch-set-value="offText" value="No" class="form-control">
             </div>
           </div>
         </div>
@@ -203,7 +203,7 @@
           </p>
           <div class="row">
             <div class="col-sm-6">
-              <input type="text" data-set-value="labelText" class="form-control">
+              <input type="text" data-switch-set-value="labelText" class="form-control">
             </div>
           </div>
         </div>
@@ -214,7 +214,7 @@
           </p>
           <div class="row">
             <div class="col-sm-6">
-              <input type="number" data-set-value="handleWidth" value="100" class="form-control">
+              <input type="number" data-switch-set-value="handleWidth" value="100" class="form-control">
             </div>
           </div>
         </div>
@@ -225,7 +225,18 @@
           </p>
           <div class="row">
             <div class="col-sm-6">
-              <input type="number" data-set-value="labelWidth" value="100" class="form-control">
+              <input type="number" data-switch-set-value="labelWidth" value="100" class="form-control">
+            </div>
+          </div>
+        </div>
+        <div class="col-sm-6 col-lg-4">
+          <h2 class="h4">Create | Destroy</h2>
+          <p>
+            <input id="switch-create-destroy" type="checkbox" checked>
+          </p>
+          <div class="row">
+            <div class="col-sm-6">
+              <button type="button" data-switch-create-destroy data-destroy-text="Destroy" class="btn btn-default">Create</button>
             </div>
           </div>
         </div>
@@ -245,6 +256,22 @@
             <input type="radio" name="radio2" data-radio-all-off="true" class="switch-radio2">
             <input type="radio" name="radio2" data-radio-all-off="true" class="switch-radio2">
           </div>
+        </div><br>
+        <hr>
+        <h2 class="h4">Inside Modals</h2>
+        <button data-toggle="modal" data-target="#modal-switch" class="btn btn-default">Open Modal</button>
+        <div id="modal-switch" tabindex="-1" role="dialog" aria-labelledby="modal-switch-label" class="modal fade">
+          <div class="modal-dialog">
+            <div class="modal-content">
+              <div class="modal-header">
+                <button type="button" data-dismiss="modal" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+                <div id="modal-switch-label" class="modal-title">Title</div>
+              </div>
+              <div class="modal-body">
+                <input id="switch-modal" type="checkbox" checked>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>

src/coffee/bootstrap-switch.coffee

@@ -65,7 +65,7 @@ do ($ = window.jQuery, window) ->
       @$element.prop "indeterminate", true  if @options.indeterminate
 
       # normalize handles width
-      @_width()
+      @_initWidth()
 
       # set container position
       @_containerPosition @options.state, =>
@@ -85,7 +85,7 @@ do ($ = window.jQuery, window) ->
     state: (value, skip) ->
       return @options.state  if typeof value is "undefined"
       return @$element  if @options.disabled or @options.readonly
-      return @$element  if @options.state and not @options.radioAllOff and @$element.is ':radio'
+      return @$element  if @options.state and not @options.radioAllOff and @$element.is ":radio"
 
       if @options.indeterminate
         @indeterminate false
@@ -118,10 +118,9 @@ do ($ = window.jQuery, window) ->
       return @options.animate  if typeof value is "undefined"
 
       value = not not value
-      @options.animate = value
+      return @$element  if value is @options.animate
 
-      @$wrapper[if value then "addClass" else "removeClass"]("#{@options.baseClass}-animate")
-      @$element
+      @toggleAnimate()
 
     toggleAnimate: ->
       @options.animate = not @options.animate
@@ -133,11 +132,9 @@ do ($ = window.jQuery, window) ->
       return @options.disabled  if typeof value is "undefined"
 
       value = not not value
-      @options.disabled = value
+      return @$element  if value is @options.disabled
 
-      @$element.prop "disabled", value
-      @$wrapper[if value then "addClass" else "removeClass"]("#{@options.baseClass}-disabled")
-      @$element
+      @toggleDisabled()
 
     toggleDisabled: ->
       @options.disabled = not @options.disabled
@@ -150,11 +147,9 @@ do ($ = window.jQuery, window) ->
       return @options.readonly  if typeof value is "undefined"
 
       value = not not value
-      @options.readonly = value
+      return @$element  if value is @options.readonly
 
-      @$element.prop "readonly", value
-      @$wrapper[if value then "addClass" else "removeClass"]("#{@options.baseClass}-readonly")
-      @$element
+      @toggleReadonly()
 
     toggleReadonly: ->
       @options.readonly = not @options.readonly
@@ -167,17 +162,14 @@ do ($ = window.jQuery, window) ->
       return @options.indeterminate  if typeof value is "undefined"
 
       value = not not value
-      @options.indeterminate = value
+      return @$element  if value is @options.indeterminate
 
-      @$element.prop "indeterminate", value
-      @$wrapper[if value then "addClass" else "removeClass"]("#{@options.baseClass}-indeterminate")
-      @_containerPosition()
-      @$element
+      @toggleIndeterminate()
 
     toggleIndeterminate: ->
       @options.indeterminate = not @options.indeterminate
 
-      @$element.prop "indeterminate", not @options.indeterminate
+      @$element.prop "indeterminate", @options.indeterminate
       @$wrapper.toggleClass "#{@options.baseClass}-indeterminate"
       @_containerPosition()
       @$element
@@ -186,16 +178,9 @@ do ($ = window.jQuery, window) ->
       return @options.inverse  if typeof value is "undefined"
 
       value = not not value
+      return @$element  if value is @options.inverse
 
-      @$wrapper[if value then "addClass" else "removeClass"]("#{@options.baseClass}-inverse")
-      $on = @$on.clone true
-      $off = @$off.clone true
-      @$on.replaceWith $off
-      @$off.replaceWith $on
-      @$on = $off
-      @$off = $on
-      @options.inverse = value
-      @$element
+      @toggleInverse()
 
     toggleInverse: ->
       @$wrapper.toggleClass "#{@options.baseClass}-inverse"
@@ -286,6 +271,9 @@ do ($ = window.jQuery, window) ->
     radioAllOff: (value) ->
       return @options.radioAllOff  if typeof value is "undefined"
 
+      value = not not value
+      return @$element  if value is @options.radioAllOff
+
       @options.radioAllOff = value
       @$element
 
@@ -341,6 +329,15 @@ do ($ = window.jQuery, window) ->
       @$container.width (@_handleWidth * 2) + @_labelWidth
       @$wrapper.width @_handleWidth + @_labelWidth
 
+    _initWidth: ->
+      return @_width()  if @$wrapper.is ":visible"
+
+      widthInterval = window.setInterval =>
+        if @$wrapper.is ":visible"
+          @_width()
+          window.clearInterval widthInterval
+      , 50
+
     _containerPosition: (state = @options.state, callback) ->
       @$container
       .css "margin-left", =>
@@ -357,7 +354,7 @@ do ($ = window.jQuery, window) ->
 
       if $.support.transition
         @$container
-        .one("bsTransitionEnd", callback)
+        .one "bsTransitionEnd", callback
         .emulateTransitionEnd 500
       else
         callback()

src/docs/examples.jade

@@ -7,63 +7,63 @@ block content
     .col-sm-6.col-lg-4
       h2.h4 State
       p
-        input#switch-state(type='checkbox',)
+        input#switch-state(type='checkbox', checked)
       .btn-group
-        button.btn.btn-default(type='button' data-toggle='state') Toggle
-        button.btn.btn-default(type='button', data-set='state', data-value='true') Set true
-        button.btn.btn-default(type='button', data-set='state', data-value='false') Set false
-        button.btn.btn-default(type='button', data-get='state') Get
+        button.btn.btn-default(type='button' data-switch-toggle='state') Toggle
+        button.btn.btn-default(type='button', data-switch-set='state', data-switch-value='true') Set true
+        button.btn.btn-default(type='button', data-switch-set='state', data-switch-value='false') Set false
+        button.btn.btn-default(type='button', data-switch-get='state') Get
 
     .col-sm-6.col-lg-4
       h2.h4 Size
       p
         input#switch-size(type='checkbox', checked, data-size='mini')
       .btn-group
-        button.btn.btn-default(type='button', data-set='size', data-value='mini') Mini
-        button.btn.btn-default(type='button', data-set='size', data-value='small') Small
-        button.btn.btn-default(type='button', data-set='size', data-value='normal') Normal
-        button.btn.btn-default(type='button', data-set='size', data-value='large') Large
-        button.btn.btn-default(type='button', data-get='size') Get
+        button.btn.btn-default(type='button', data-switch-set='size', data-switch-value='mini') Mini
+        button.btn.btn-default(type='button', data-switch-set='size', data-switch-value='small') Small
+        button.btn.btn-default(type='button', data-switch-set='size', data-switch-value='normal') Normal
+        button.btn.btn-default(type='button', data-switch-set='size', data-switch-value='large') Large
+        button.btn.btn-default(type='button', data-switch-get='size') Get
 
     .col-sm-6.col-lg-4
       h2.h4 Animate
       p
         input#switch-animate(type='checkbox', checked)
       p
-        button.btn.btn-default(type='button', data-toggle='animate') Toggle
-        button.btn.btn-default(type='button', data-get='animate') Get
+        button.btn.btn-default(type='button', data-switch-toggle='animate') Toggle
+        button.btn.btn-default(type='button', data-switch-get='animate') Get
 
     .col-sm-6.col-lg-4
       h2.h4 Disabled
       p
         input#switch-disabled(type='checkbox', checked, disabled)
       p
-        button.btn.btn-default(type='button', data-toggle='disabled') Toggle
-        button.btn.btn-default(type='button', data-get='disabled') Get
+        button.btn.btn-default(type='button', data-switch-toggle='disabled') Toggle
+        button.btn.btn-default(type='button', data-switch-get='disabled') Get
 
     .col-sm-6.col-lg-4
       h2.h4 Readonly
       p
         input#switch-readonly(type='checkbox', checked, readonly)
       p
-        button.btn.btn-default(type='button', data-toggle='readonly') Toggle
-        button.btn.btn-default(type='button', data-get='readonly') Get
+        button.btn.btn-default(type='button', data-switch-toggle='readonly') Toggle
+        button.btn.btn-default(type='button', data-switch-get='readonly') Get
 
     .col-sm-6.col-lg-4
       h2.h4 Indeterminate
       p
         input#switch-indeterminate(type='checkbox', checked, data-indeterminate='true')
       p
-        button.btn.btn-default(type='button', data-toggle='indeterminate') Toggle
-        button.btn.btn-default(type='button', data-get='indeterminate') Get
+        button.btn.btn-default(type='button', data-switch-toggle='indeterminate') Toggle
+        button.btn.btn-default(type='button', data-switch-get='indeterminate') Get
 
     .col-sm-6.col-lg-4
       h2.h4 Inverse
       p
         input#switch-inverse(type='checkbox', checked, data-inverse='true')
       p
-        button.btn.btn-default(type='button', data-toggle='inverse') Toggle
-        button.btn.btn-default(type='button', data-get='inverse') Get
+        button.btn.btn-default(type='button', data-switch-toggle='inverse') Toggle
+        button.btn.btn-default(type='button', data-switch-get='inverse') Get
 
     .col-sm-6.col-lg-4
       h2.h4 On Color
@@ -75,12 +75,12 @@ block content
             | Set  
             span.caret
           .dropdown-menu(role='menu')
-            li: a(data-set='onColor', data-value='primary') Primary
-            li: a(data-set='onColor', data-value='info') Info
-            li: a(data-set='onColor', data-value='success') Success
-            li: a(data-set='onColor', data-value='warning') Warning
-            li: a(data-set='onColor', data-value='default') Default
-        button.btn.btn-default(type='button', data-get='onColor') Get
+            li: a(data-switch-set='onColor', data-switch-value='primary') Primary
+            li: a(data-switch-set='onColor', data-switch-value='info') Info
+            li: a(data-switch-set='onColor', data-switch-value='success') Success
+            li: a(data-switch-set='onColor', data-switch-value='warning') Warning
+            li: a(data-switch-set='onColor', data-switch-value='default') Default
+        button.btn.btn-default(type='button', data-switch-get='onColor') Get
 
     .col-sm-6.col-lg-4
       h2.h4 Off Color
@@ -92,12 +92,12 @@ block content
             | Set  
             span.caret
           .dropdown-menu(role='menu')
-            li: a(data-set='offColor', data-value='primary') Primary
-            li: a(data-set='offColor', data-value='info') Info
-            li: a(data-set='offColor', data-value='success') Success
-            li: a(data-set='offColor', data-value='warning') Warning
-            li: a(data-set='offColor', data-value='default') Default
-        button.btn.btn-default(type='button', data-get='offColor') Get
+            li: a(data-switch-set='offColor', data-switch-value='primary') Primary
+            li: a(data-switch-set='offColor', data-switch-value='info') Info
+            li: a(data-switch-set='offColor', data-switch-value='success') Success
+            li: a(data-switch-set='offColor', data-switch-value='warning') Warning
+            li: a(data-switch-set='offColor', data-switch-value='default') Default
+        button.btn.btn-default(type='button', data-switch-get='offColor') Get
 
     .col-sm-6.col-lg-4
       h2.h4 On Text
@@ -105,7 +105,7 @@ block content
         input#switch-onText(type='checkbox', checked, data-on-text='Yes')
       .row
         .col-sm-6
-          input.form-control(type='text', data-set-value='onText', value='Yes')
+          input.form-control(type='text', data-switch-set-value='onText', value='Yes')
 
     .col-sm-6.col-lg-4
       h2.h4 Off Text
@@ -113,7 +113,7 @@ block content
         input#switch-offText(type='checkbox', data-off-text='No')
       .row
         .col-sm-6
-          input.form-control(type='text', data-set-value='offText', value='No')
+          input.form-control(type='text', data-switch-set-value='offText', value='No')
 
     .col-sm-6.col-lg-4
       h2.h4 Label Text
@@ -121,7 +121,7 @@ block content
         input#switch-labelText(type='checkbox', data-label-text='Label')
       .row
         .col-sm-6
-          input.form-control(type='text', data-set-value='labelText')
+          input.form-control(type='text', data-switch-set-value='labelText')
 
     .col-sm-6.col-lg-4
       h2.h4 Handle Width
@@ -129,7 +129,7 @@ block content
         input#switch-handleWidth(type='checkbox', data-handle-width='100')
       .row
         .col-sm-6
-          input.form-control(type='number', data-set-value='handleWidth', value='100')
+          input.form-control(type='number', data-switch-set-value='handleWidth', value='100')
 
     .col-sm-6.col-lg-4
       h2.h4 Label Width
@@ -137,7 +137,15 @@ block content
         input#switch-labelWidth(type='checkbox', data-label-width='100')
       .row
         .col-sm-6
-          input.form-control(type='number', data-set-value='labelWidth', value='100')
+          input.form-control(type='number', data-switch-set-value='labelWidth', value='100')
+
+    .col-sm-6.col-lg-4
+      h2.h4 Create | Destroy
+      p
+        input#switch-create-destroy(type='checkbox', checked)
+      .row
+        .col-sm-6
+          button.btn.btn-default(type='button', data-switch-create-destroy, data-destroy-text="Destroy") Create
 
   br
   br
@@ -156,12 +164,12 @@ block content
         input.switch-radio2(type='radio', name='radio2', data-radio-all-off='true')
         input.switch-radio2(type='radio', name='radio2', data-radio-all-off='true')
 
-  //-
     br
     hr
 
-    h2.h4 Inside a Modal
-    button.btn.btn-default(data-toggle='modal', data-target='#modal-switch') Open the modal
+
+    h2.h4 Inside Modals
+    button.btn.btn-default(data-toggle='modal', data-target='#modal-switch') Open Modal
     .modal.fade#modal-switch(tabindex='-1', role='dialog', aria-labelledby='modal-switch-label')
       .modal-dialog
         .modal-content
@@ -169,7 +177,6 @@ block content
             button.close(type='button', data-dismiss='modal')
               span(aria-hidden='true') ×
               span.sr-only Close
-            .modal-title#modal-switch-label Modal title
-            .modal-body
-              input#switch-modal(type='checkbox', checked)
-
+            .modal-title#modal-switch-label Title
+          .modal-body
+            input#switch-modal(type='checkbox', checked)

test/bootstrap-switch.js

@@ -109,7 +109,7 @@
         if (this.options.indeterminate) {
           this.$element.prop("indeterminate", true);
         }
-        this._width();
+        this._initWidth();
         this._containerPosition(this.options.state, (function(_this) {
           return function() {
             if (_this.options.animate) {
@@ -134,7 +134,7 @@
         if (this.options.disabled || this.options.readonly) {
           return this.$element;
         }
-        if (this.options.state && !this.options.radioAllOff && this.$element.is(':radio')) {
+        if (this.options.state && !this.options.radioAllOff && this.$element.is(":radio")) {
           return this.$element;
         }
         if (this.options.indeterminate) {
@@ -179,9 +179,10 @@
           return this.options.animate;
         }
         value = !!value;
-        this.options.animate = value;
-        this.$wrapper[value ? "addClass" : "removeClass"]("" + this.options.baseClass + "-animate");
-        return this.$element;
+        if (value === this.options.animate) {
+          return this.$element;
+        }
+        return this.toggleAnimate();
       };
 
       BootstrapSwitch.prototype.toggleAnimate = function() {
@@ -195,10 +196,10 @@
           return this.options.disabled;
         }
         value = !!value;
-        this.options.disabled = value;
-        this.$element.prop("disabled", value);
-        this.$wrapper[value ? "addClass" : "removeClass"]("" + this.options.baseClass + "-disabled");
-        return this.$element;
+        if (value === this.options.disabled) {
+          return this.$element;
+        }
+        return this.toggleDisabled();
       };
 
       BootstrapSwitch.prototype.toggleDisabled = function() {
@@ -213,10 +214,10 @@
           return this.options.readonly;
         }
         value = !!value;
-        this.options.readonly = value;
-        this.$element.prop("readonly", value);
-        this.$wrapper[value ? "addClass" : "removeClass"]("" + this.options.baseClass + "-readonly");
-        return this.$element;
+        if (value === this.options.readonly) {
+          return this.$element;
+        }
+        return this.toggleReadonly();
       };
 
       BootstrapSwitch.prototype.toggleReadonly = function() {
@@ -231,36 +232,29 @@
           return this.options.indeterminate;
         }
         value = !!value;
-        this.options.indeterminate = value;
-        this.$element.prop("indeterminate", value);
-        this.$wrapper[value ? "addClass" : "removeClass"]("" + this.options.baseClass + "-indeterminate");
-        this._containerPosition();
-        return this.$element;
+        if (value === this.options.indeterminate) {
+          return this.$element;
+        }
+        return this.toggleIndeterminate();
       };
 
       BootstrapSwitch.prototype.toggleIndeterminate = function() {
         this.options.indeterminate = !this.options.indeterminate;
-        this.$element.prop("indeterminate", !this.options.indeterminate);
+        this.$element.prop("indeterminate", this.options.indeterminate);
         this.$wrapper.toggleClass("" + this.options.baseClass + "-indeterminate");
         this._containerPosition();
         return this.$element;
       };
 
       BootstrapSwitch.prototype.inverse = function(value) {
-        var $off, $on;
         if (typeof value === "undefined") {
           return this.options.inverse;
         }
         value = !!value;
-        this.$wrapper[value ? "addClass" : "removeClass"]("" + this.options.baseClass + "-inverse");
-        $on = this.$on.clone(true);
-        $off = this.$off.clone(true);
-        this.$on.replaceWith($off);
-        this.$off.replaceWith($on);
-        this.$on = $off;
-        this.$off = $on;
-        this.options.inverse = value;
-        return this.$element;
+        if (value === this.options.inverse) {
+          return this.$element;
+        }
+        return this.toggleInverse();
       };
 
       BootstrapSwitch.prototype.toggleInverse = function() {
@@ -377,6 +371,10 @@
         if (typeof value === "undefined") {
           return this.options.radioAllOff;
         }
+        value = !!value;
+        if (value === this.options.radioAllOff) {
+          return this.$element;
+        }
         this.options.radioAllOff = value;
         return this.$element;
       };
@@ -438,6 +436,21 @@
         return this.$wrapper.width(this._handleWidth + this._labelWidth);
       };
 
+      BootstrapSwitch.prototype._initWidth = function() {
+        var widthInterval;
+        if (this.$wrapper.is(":visible")) {
+          return this._width();
+        }
+        return widthInterval = window.setInterval((function(_this) {
+          return function() {
+            if (_this.$wrapper.is(":visible")) {
+              _this._width();
+              return window.clearInterval(widthInterval);
+            }
+          };
+        })(this), 50);
+      };
+
       BootstrapSwitch.prototype._containerPosition = function(state, callback) {
         if (state == null) {
           state = this.options.state;