Was using bootstrap-switch inside one of my projects. The one issue I have is that inside bootstrapSwitch.js on line 237, you have attached the bootstrapSwitch to any element with a class of switch.

$(function () {
  $('.switch')['bootstrapSwitch']();
});

The problem I am having is that it then affects one of my other js library files ( bootstrap-datepicker.js) which use the class switch for styling element (which I find is a very generic name):

I know that if I remove the snippet from your library file it will fix this issue however I would then have to remember to remove this every time I update your script.

I propose maybe changing the name of the class to .bootstrap-switch or removing it from the library file.

Any feedback would be appreciated.

Thomas

Looking at your samples you are using a css class "switch"...which I cannot find in the css file. I presume I am missing something obvious, but well..err... I'm missing it 👯

Hi,
if I use these labels the switch button doesn't show me the whole label...

data-on-label="ATTIVO" data-off-label="NASCOSTO"

maybe too long?
How can I set a auto-width?

Thanks so much!

Well I'm using a function to map a form and convert all the value to a javascript object, the problem using this plugin is that never update the value from the input, or mark them as checked="checked".

I think would be a good practice to add the value="true" or value="false" when the control change the status.

I made this change whit the follow line of code.

            $element.find('input').on('change', function (e) {
              var $this = $(this)

                ...
                ...
                ...

                $element.parent().trigger('switch-change', {'el': $this, 'value': thisState})
              }

              /***** ADD CODE ****/
              var checkbox = $element.find("input:checkbox");
              if ($element.attr("class").indexOf("switch-on") != -1) {
                  checkbox.attr("checked", "checked");
                  checkbox.val("true")
              } else {
                  checkbox.removeAttr("checked");
                  checkbox.val("false");
              }

              /***** ADD CODE ****/

            });

so now you can do a map like the follow.

//selected solution http://stackoverflow.com/questions/1184624/convert-form-data-to-js-object-with-jquery samuel meacham

Util.form2Json = function (inputs) {
    var listObj = {}
    $.map(inputs, function (n, i) {
        /*
        //.NET Dictionary way
        var o = {};
        o[n.name] = $(n).val();
        return o;
        */

        var o = {};
        o[n.name] = $(n).val();
        listObj[n.name] = $(n).val();
        return o;
    });
    return listObj;
}

and the value of the switch control will be true or false, like if you will use the method checked.

This modify give you more control over the swtich control, letting programmers to decide how to get the proper value for this control,

My two cents
ncubica

I would expect on a touch device to have it slide when dragged

how to get the value of state of on and off ?

Hi! Great plug-in, I just found it today, I was doing some quick tests and I was seeing some weird behavior (switching only working once or twice).

After doing some checks it seems the plug-in doesn't work well with jQuery 1.9.

It will be nice if you can check why it breaks with 1.9 and do the necessary adjustments as it seems to be one of the best implementations out there for this type of ON/OFF switch.

Regards and keep up the good work!

Hi folks!

In the case of using an associated label, as follows:

Clicking the label has no effect on switch =[

That would be a nice enhancement.

Cheers,

Arnaldo

Maybe minify the JS and CSS and add it to the branch?

Hello,

When using the following code:

<div class="control-group">
   <label class="control-label" for="stay_connected">Rester connecté : </label>
   <div class="switch switch-small controls" data-on-label='Oui' data-off-label='Non'>
      <input id="stay_connected" type="checkbox" value="stay_connected" />
   </div>
</div>

I can't get the switch to be aligned on the left. The controls class have a 180x left margin I can't override, dunno why.

I tried in many way. If you ever have a suggestion.

Kind regards.

EDIT: The only way I found is to use an #id, but it's not quite perfect if I have multiple switches in the same form, as an #id should be unique.

I can as well use a new div inserted:

<div class="control-group">
    <label class="control-label" for="stay_connected">Rester connecté : </label>
    <div class="controls">
        <div class="switch switch-small" id="switch" data-on-label='Oui' data-off-label='Non'>
            <input id="stay_connected" type="checkbox" value="stay_connected" />
        </div>
    </div>
</div>

In this case I can set a new margin to ".form-horizontal .controls .switch" rule but I can only alter the margin-left, margin-top is not working unlike using the #id.

Is there any reason why the source uses SCSS ?

Although the switch button are disabled with the method $('.swith').bootstrapSwitch('setActive', false); we can still switch it by clicking on the label.

When using http://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/1.3/bootstrapSwitch.min.js I run into the following exception when using jQuery in noConflict.

Uncaught TypeError: Property '$' of object [object Object] is not a function bootstrapSwitch.min.js:1

Those last lines (attach switch to all elements with class .switch) should be wrapped in a (function($){/**/})(jQuery);

It would be nice to be able to specify a slider icon and to have that icon be able to be bigger than the field it's sliding over. I'm trying to get the effect from the attached image and can't seem to do it without messing with the DOM elements this library injects. If I get it working I'll add a pull request.

Can't transform a dynamically created checkbox to the bootstrapSwitch. Is this possible?

$('#test').html('Switch: <div class="switch"><input type="checkbox" checked="checked" id="mySwitch"></div>');
then run
$('#mySwitch').bootstrapSwitch();

could you tell me how to fix this..

If there is an id property added to the input tag, the switch will still be usable after disabling it. .bootstrapSwitch('setActive', false) visually disables it, but the switch can still be clicked.

Here's a proof of concept: https://gist.github.com/mvschaik/5782169

It fails and beaks our whole application simply because switch is a reserved keyword. Changed the code to use "witch" instead and then it worked perfectly. Witch is of course not a great name but you should consider a name change to give better compatibility for different circumstances.

Other than this it works perfectly and I am very greatful for a job well done! Had some problems getting it work at first because our application is built with knockout js. But after realizing that the control wasn't rendered yet when I did .switch() on it I fixed it real quick by writing a knockout binding handler that called the function when the control indeed was being set up by knockout..

Cheers for a good plugin! (checkboxes are way to ugly for modern applications!)

Hi.

After playing around with this great component, I would like to suggest two new functions:

setEnabled(bool) and isEnabled()

Sometimes it is impossible to keep track of activation states based on toggleActivation().

Cheers

When Using Bootstrap Modal that uses AJAX load function, when the function loads and renders the page into the modal. The switch button is Duplicated

If JS is disabled (e.g.: with NoScript) there's no fallback to a plain old chackbox

in my Backbone.JS app the switch-buttons are rendered properly, but the don't switches on click. How can i solve this problem?

Hello!

I've run into an issue with bootstrap switch where the label element shows through date pickers and various components meant to overlay the page. This is caused by the following CSS entry:

.has-switch label {
...
z-index: 100;
}

One example where this occurs is jquery-ui's datepicker:

As far as I can tell, the z-index is arbitrary. Removing it does not have any effect on the toggle's behavior in IE, FF, Chrome, or Safari. Am I missing anything obvious here? Shall I send a PR?

how to display an alert with the value of the checkbox in the onChange event?

<div class="success-toggle-button">
<input type="checkbox" name="pdid[]" class="toggle" value="1" checked="checked">
</div>
<div class="success-toggle-button">
<input type="checkbox" name="pdid[]" class="toggle" value="2" checked="checked">
</div>
<div class="success-toggle-button">
<input type="checkbox" name="pdid[]" class="toggle" value="3" checked="checked">
</div>
<div class="success-toggle-button">
<input type="checkbox" name="pdid[]" class="toggle" value="4" checked="checked">
</div>

$('.success-toggle-button').toggleButtons({
onChange: function($el, status, e){
console.log($el, status, e);
//alert(); display value of the checkbox changed???
}
});

When using http://twitter.github.io/bootstrap/javascript.html#modals with a remote source it isn't activating the switches.

Is there something I'm doing wrong, or do I need to do something else to manually activate the switches in this case?

bootstrap-switch can't check/uncheck it by keyboard. press [Tab] key will skip bootstrap-switch.

How make it focusable?

Doesn't work in mobile

I tested in Android and Safari mobile

....

                    <div id="mySwitch" class="boatshow switch switch-small" data-on-label="Display" data-off-label="Hide" data-on="primary" data-off="danger">
                    <input type="checkbox" />
                    </div>

Hello,
According to the answer given by on Stackoverflow here, we can use this with radio button groups. I'm not sure how to do it. There is no documentation about it. Is it possible to use with radio buttons? I have created a fiddle, if needed.

Thanks!

When using HTML Text in combination with switch-mini there is an empty space in the label.

If using bootstrap-switch together with bootstrap-datepicker together on one site, the calendar view of datepicker is broken.

There is a style inside the bootstrap-datepicker, which is called "switch", so it gets brocken by the css of bootstrap-switch... maybe you could tie up the selector to something more unique?

Great job! I was amused by this fancy toogle switch...

Unfortunately on my first try I've got this "Unexpected token <" message at line "4", first doc char... =/

Is there any chance I've done something wrong?

Beste Regards,

Arnaldo

Currently, everywhere I'm dispatching switch-change event to underlying .
Why not make it a default behaviour?

From the example, it is possible to set data-on and data-off attributes, however I'd like to be able to have "no color" on the ON and "danger" (aka red) on the OFF switch. At the moment, this does not seem to be possible.

Also, what if the toggle needs to be inverted? For dark themes?

First, great work :)
I try load JS files and show me error over bootstrap-switch.js. I try by remote and local files and nothing.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>        
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/1.3/bootstrapSwitch.min.js"></script> 

TypeError: $(...).bootstrapSwitch is not a function
$(function () {
$('.switch')'bootstrapSwitch'; <-------------
});

Please, can you helpme ?
Thank
Jorge Abrehu

I am using this on a project where i load in Ajax tabs. I end up having to call this function to get them to show up.

$(function () {
  $('.switch')['switch']();
});

The issue is, this doubles up all the switches on previous tabs etc. Is there a way to detect which switches are already initialized and ignore them?

Is it any simple way to do next?
I have two (three, ..., n) switches and it is possible only one active state. So if I click on 'switch one', I want to set false state to 'switch two' (if it's enabled) and visa versa.
With this solution I need to click once to switch off all switches and click again to enable one of them:

$('.switch').on('switch-change', function () {
    $(this).siblings().bootstrapSwitch('setState', false);
});

I think it is common situation and must be simple ready solution :)

Thanks for this great code!
Right now we cannot migrate away from https://github.com/ghinda/css-toggle-switch to bootstrap-switch since we need to support switching of a radiobutton group of 3 elements.

Any plans on implementing a solution for this?

Fantastic extension! Love it :)

One think I was wondering about (and might as well build myself if it's not possible right now): can I include the switch in the normal flow of a form which you can traverse through by using tab. In normal forms, ordinary checkboxes can be toggled with the spacebar when they have received focus. Similarly I would like to do this with these switches.

the title says everything. 👍

Here is an example http://jsfiddle.net/dCtA4/1/

Is there a way to set the state of the switch without triggering the event 'switch-change'?

My goal is to detect the change in one switch (the user clicks it) and set to false the state of all of the others.

The checked attribute of the input checkbox never changes when the status of the switch changes

Your plugin is awesome! Thanks to contribute!

Is possible to you create the minified version?

Just tried the demo with IE7 and it breaks in a pretty ugly way.

Bootstrap itself would work (although not as eye-pleasing with modern browsers) on IE7, so I guess a line to indicate that this plugin would not work on IE7 or below is needed.

I need default OFF and then an option to either side

Any ideas?

Hi,

I have a problem and I'm not sure I'm missing something.. the switch will only slide if I click and slide with the mouse. it will not switch on click.. any idea? 0_o

Thanks in advance