Switchery dynamically change disabled option

Question

I have multiple checkboxes on the page that are converted into Switcheries like this:

$(document).ready(function () {
            $("input[type=checkbox]").each(function (index, element) {
                var init = new Switchery(element, {
                    size: 'small', color: '#477FC5', secondaryColor: '#CCCCCC'
                });
            });
        });

So I have eventually the markup:

<input type="checkbox" id="checkbox_1" value="baz" data-switchery="true" style="display: none;">
<span class="switchery switchery-small" style="box-shadow: rgb(71, 127, 197) 0px 0px 0px 11px inset;">
    <small style="left: 13px; transition: background-color 0.4s, left 0.2s; background-color: rgb(255, 255, 255);"></small>
</span>
<input type="checkbox" id="checkbox_2" value="baz" data-switchery="true" style="display: none;">
<span class="switchery switchery-small" style="box-shadow: rgb(71, 127, 197) 0px 0px 0px 11px inset;">
    <small style="left: 13px; transition: background-color 0.4s, left 0.2s; background-color: rgb(255, 255, 255);"></small>
</span>
<input type="checkbox" id="checkbox_3" value="baz" data-switchery="true" style="display: none;">
<span class="switchery switchery-small" style="box-shadow: rgb(71, 127, 197) 0px 0px 0px 11px inset;">
    <small style="left: 13px; transition: background-color 0.4s, left 0.2s; background-color: rgb(255, 255, 255);"></small>
</span>

UI:

I want to dynamically disable or enable these switcheries after some events. But I cannot correctly select the switchery to disable, because there are multiple switcheries on the page, and the following code does not work for me:

$(".main-checkbox").change(function () {
                var id = 3;
                var switchery = new Switchery($("#checkbox_" + id));
                if ($(this).is(":checked")) {
                    switchery.disable();
                } else {
                    switchery.enable();
                }
            });

What can I do to make it work as expected?

Answer 1

When you create a new instance of Switchery you can save it in a map like:

swObjs[element.id] = init;

In this way, when you need to use the Switchery for the current element you can get the instance:

swObjs[this.id]

The snippet:

var swObjs = {};

$("input[type=checkbox]").each(function (index, element) {
    var init = new Switchery(element, {
        size: 'small', color: '#477FC5', secondaryColor: '#CCCCCC'
    });
    swObjs[element.id] = init;
});
$(":checkbox").change(function (e) {
    console.log(swObjs[this.id].isDisabled());
    if ($(this).is(":checked")) {
        swObjs[this.id].disable()
    } else {
        swObjs[this.id].enable()
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/abpetkov/switchery/master/dist/switchery.min.css">
<script src="https://rawgit.com/abpetkov/switchery/master/dist/switchery.min.js"></script>

<input type="checkbox" id="checkbox_1" value="baz" data-switchery="true" style="display: none;">
<span class="switchery switchery-small" style="box-shadow: rgb(71, 127, 197) 0px 0px 0px 11px inset;">
    <small style="left: 13px; transition: background-color 0.4s, left 0.2s; background-color: rgb(255, 255, 255);"></small>
</span>
<input type="checkbox" id="checkbox_2" value="baz" data-switchery="true" style="display: none;">
<span class="switchery switchery-small" style="box-shadow: rgb(71, 127, 197) 0px 0px 0px 11px inset;">
    <small style="left: 13px; transition: background-color 0.4s, left 0.2s; background-color: rgb(255, 255, 255);"></small>
</span>
<input type="checkbox" id="checkbox_3" value="baz" data-switchery="true" style="display: none;">
<span class="switchery switchery-small" style="box-shadow: rgb(71, 127, 197) 0px 0px 0px 11px inset;">
    <small style="left: 13px; transition: background-color 0.4s, left 0.2s; background-color: rgb(255, 255, 255);"></small>
</span>