开关动态更改禁用选项

Question

页面上有多个复选框，这些复选框被转换为如下所示的开关：

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

所以我最终得到了标记：

<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：

​

我希望在某些事件发生后动态禁用或启用这些切换。但是，我无法正确选择要禁用的开关，因为页面上有多个开关，下面的代码对我不起作用：

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

我能做些什么来使它像预期的那样工作呢？

Answer 1

在创建Switchery的新实例时，可以将其保存在如下所示的映射中：

swObjs[element.id] = init;

这样，当您需要对当前元素使用Switchery时，您可以获得实例：

swObjs[this.id]

片段：

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>

​