Question

我在页面上有多个复选框，可以像这样转换为Switcheries：

$(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>

Switchery动态更改禁用选项

1 个答案: