Toggle a switch from active(clicked) to inactive (not clicked) with JavaScript

[Sanafan]

Hey,
can you provide an example on how to change the state from a switchery via javascript? I tried to achieve this now for the last 4 hours and i can't get it working. I tried to select the switchery, and add "checked" to it, nothing happens. Think i have to call a function, but which one exactly and how do i have to call it via jQuery?

[abpetkov]

Have you searched through the Readme and the closed issues? If not, check those out:

• API Docs
• Issue Make a switchery enabled or disabled #30

[Sanafan]

Of course i did - and i'm doing the same now like #30 (comment) because i don't know, how to change the state after the switchery is initialy loaded. With "checked" or not it is not working.

[abpetkov]

Try using the methods in the API. I've made those, so that you don't have to do what others had to do before in that issue.

Use .enable() and .disable() on your Switchery instance. This should be enough.

[Sanafan]

Man... it was so easy - sorry, that was not clear to me! That works totaly fine!

Can you just tell me the correct way to select the correct switchery instance?

[abpetkov]

@Sanafan here you go:

var target = document.querySelector('.js-target-checkbox');
var switch = new Switchery(target);
switch.enable();

[Sanafan]

Very great that you try to help me - but i can't figure out, why it is not working. It's also not working with your Code. What i would like to achive is, that the User uses the switcherys for my settings menu. But the application has to check, whether the Option is set to true or false. This is done by a script every time the user starts the application. So now, when the option in localStorage is set to true, switchery must enable the switch for that option because it doesn't make sense if that is disabled.

I can also provide detailed information of my code - but should i do it here, or should i open up a question on stackoverflow?

Maybe it's neccessary: I'm using the standalone version

[abpetkov]

As much as I want to help you get through with your problem, I don't have enough time to do that. The best I can do for you is to show you a simple example of how I use this. In the example below, I'm attaching the enable/disable functionality to buttons, but you can use them with whatever else you like (e.g. set the state after checking for cookie)

http://jsfiddle.net/gt8wy7L8/

I'm pretty sure this is a problem of your implementation, but with this you're on your own. I hope what the example I provided helps. If you can't do it, I'm sure there are a lot of people on StackOverflow who could help you.

[Sanafan]

Hell man... we're talking about sth. totaly different - i'm very sorry for that confusion! I mean not, that the switch is clickable or not, i meant, that it must be active or inactive so like... green (active) or white (inactive). If the user activates the background mode, closes the application by double tapping home button, and re-opens it, the switchery has still to be active and thats what i would like to achive. With which command can i toggle between active and inactive state?

Thanks in advance abpetkov, I really appreciate your help!!!

[abpetkov]

I'm really having trouble understanding your problem. What you're referencing as active/inactive seems quite like the enabled/disabled case I'm talking about. What does the background-color has to do with all of this in your case? You want to change colors dynamically or what?

Please try to spend some more time to describe your problem to someone that has no idea what your app is and has never seen it before. Some pics of what you have and what you want it to be will be perfect for me to understand.

[Sanafan]

I think just two pictures will describe exactly what i want. I want to toggle the state from the switch with JavaScript.

[abpetkov]

I think you'll find the answer in this issue - #27. Probably towards the end where I gave an example.

[Sanafan]

Man...What the hell on earth - i'm very sorry for my bad explanation of my problem @abpetkov !!! That #27 did the trick!

This is the working code

function setOptionsForSwitches(){
    var special = document.querySelector('#inputBackgroundMode');

    if(localStorage.backgroundModeOption == 1){
                $(special).attr("checked", true);
            }else {
                $(special).attr("checked", false);
            }

    if (typeof Event === 'function' || !document.fireEvent) {
          var event = document.createEvent('HTMLEvents');
          event.initEvent('change', true, true);
          special.dispatchEvent(event);
    } else {
        special.fireEvent('onchange');
    }
}

Thank you very very much for your time, and help! I'll edit the title to make it all a bit clearer :-)