state and checked not working at all

[Goeny]

I want to use the switch with an ordinary checkbox

For some reason the checked attribute doesn't do a thing.
When changing the default state value to false it doesn't work either.

No matter what i try, the switch is always "on".

<input type="checkbox" value="1" name="welkom_aan" id="welkom_aan" <?php if($data['welkom_aan'] == 1){ echo 'checked'; } ?> />

$.fn.bootstrapSwitch.defaults.state = false;
$.fn.bootstrapSwitch.defaults.size = 'small';
$.fn.bootstrapSwitch.defaults.onColor = 'success';
$.fn.bootstrapSwitch.defaults.offColor = 'danger';
$.fn.bootstrapSwitch.defaults.onText = 'Aan';
$.fn.bootstrapSwitch.defaults.offText = 'Uit';
$("#welkom_aan").bootstrapSwitch();

When checking the html using the element inspector (Chrome and FF) the output is what to be expected. But for some reason the state will not change.

[comaboy]

Hi @Goeny,
if I understand right, I solved by giving an autocomplete = "off" at the input.

[Goeny]

If i understand correct, the switch state should be "off" (or false) if the "checked" attribute is not set.

When i try that in (i.e.) Fiddle. It does exactly what it should do. State is true when "checked" is set, state is false when "checked" is not set.

<?php if($data['welkom_aan'] == 1){ echo 'checked'; } ?>

does exactly that.
It echo's the attribute "checked" only if the $data value is 1.

For some reason, the switch state is always true. Even when i set default state to false, when "checked" is set or not.

I have added autocomplete = "off" to the input, but this doesn't make any difference.

Could it be a conflict with some other js?

[MiroRadenovic]

i got the same problem but it happens when i try to create the bootstrap switch inside a not visible bootstrap tab. using
'''bootstrapSwitch();'''
works only if the checkboxes are in the visible tab, otherwise they do not work.

i have tried to replicate this error in jsflidder but what happens there is that the swich renders with errors:
http://jsfiddle.net/ygapoa8g/2/

[Goeny]

I think the problem is indeed because of the tabs.

I am using it in tabs aswell. Copied that part to jsfiddle. Doesnt work there either.

http://jsfiddle.net/mvgs47Lp/

The switch can be found in [Afbeeldingen] and [Website]=>[Welkomst bericht]

[daviddeutsch]

I think the issue is that bootstrap-switch prefers the 'value' attribute over all other values. Link to the line would be here.

In my opinion, setting the data-state attribute should trump the value attribute.

I think what most people here are trying to accomplish is to send an empty value when the checkbox is off and a different value when it is on - I have a group of switches that feed one array in the POST data. Another common practice used (also in my code in another instance of this same issue) is to use a hidden field first and then have the checkbox, both with the same 'name' attribute. That way, the value always shows up in the POST data, regardless of whether the checkbox is checked or not.

[Goeny]

I actually do use a hidden input field with the same name to give the "switch" a 0 value when switched off and a 1 value when switched on.

[daviddeutsch]

Actually, I'm not sure it's the hidden field. Adding some example code:

<input id="field_1" class="bootstrap-switch" name="field[]" value="2" data-state="false" type="checkbox" />

is incorrectly rendered as checked.

<input name="manageraccess" value="0" type="hidden">
<input id="manageraccess" class="bootstrap-switch" name="manageraccess" value="1" data-state="0" type="checkbox">

is correctly rendered as unchecked.

<input name="access" value="0" type="hidden">
<input id="access" class="bootstrap-switch" name="access" checked="checked" value="1" data-state="1" type="checkbox">

is correctly rendered as checked.

[Goeny]

I am using the same markup.

<input type="hidden" id="welkom_aanHidden" name="welkom_aan" value="0">
<input type="checkbox" value="1" name="welkom_aan" id="inputSwitch" <?php if($data['welkom_aan'] == 1){ echo 'checked="checked" data-state="1"'; }else{echo 'data-state="0"';} ?>>

According to your example, this code should make the switch unchecked
<input type="checkbox" value="1" name="welkom_aan" id="inputSwitch" data-state="0">
however, the switch will show up as checked

[kevenjesus]

Hi,

I have same problem :s

[cujimmy]

Using bootstrap switch within Durandal + Knockout and experiencing this problem

My binding was working fine and no longer works

    ko.bindingHandlers.checkswitch = {
        init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
            $(element).bootstrapSwitch();
            $(element).on('switchChange.bootstrapSwitch', function (e, data) {
                valueAccessor()(data);
            });
        },
        update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
            var vStatus = $(element).bootstrapSwitch('state');
            var vmStatus = ko.utils.unwrapObservable(valueAccessor());
            if (vStatus != vmStatus) {
                $(element).bootstrapSwitch('state', vmStatus, false);
            }
        }
    };

Looks like the 'state' method is no longer registering the change, possibly due to the DOM not being loaded by the framework as per the above issue.

[jangrewe]

add me to the list =(

[kbtz]

This is very odd. For me checked work just fine is some circunstances.

Here's a quick'n'dirty workaround.

[LostCrew]

hi all,

the problem occurs in v3.2.2 if you initialise switches which are not visible, for instance if they are inside non-active tabs.
i'm releasing a new minor version soon (v3.3.0), can one of you please checkout develop and tell me if the issue still happens?

[OlympicLarry]

develop fixes the problem for me with hidden tabs

[filipeleal]

Please! I need the same fix for the @OlympicLarry's problem!

[daviddeutsch]

For me, the issue happened all over the place - hidden, not hidden, didn't matter. Sorry, but time was a factor for me, so I switched to minhur/bootstrap-toggle.

[OlympicLarry]

@daviddeutsch perhaps providing a fiddle of your issue would help for us that wish to keep using this wonderfull plugin. Otherwise it just comes off as a poor attempt to promote a different plugin.

[daviddeutsch]

I tried doing that but lost more time. Again: Sorry, did not have the time to contribute but did want to share a solution that worked for me, even if it meant using a different plugin.

[LostCrew]

@daviddeutsch fair enough, i respect your need of something that just works. feel free to give the coming v3.3.0 a try, if you want.

[LostCrew]

fix is coming out with v3.3.0, thanks to all of the reporters.

[siliconalchemy]

Confirmed fixed with 3.3.1, thanks :)

[MiroRadenovic]

yep! works also for me.
thx!

[ebrahimradi]

Hi!
<input type="checkbox" data-on-color="info" data-off-color="warning" class="switch" name="type" value="something" checked="checked" data-on-text="on" data-off-text="off" >
$(".switch").bootstrapSwitch();
$('.switch').on('switchChange.bootstrapSwitch', function(event, state)
{
console.log(state); //return: undefined
}).trigger('switchChange.bootstrapSwitch');

switch is on but state is undefined!
why? It's undefined!?