Switchery 动态更改禁用选项

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:

我想在某些事件发生后动态禁用或启用这些开关。但是我不能正确地select禁用开关，因为页面上有多个开关，下面的代码对我不起作用：

$(".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 动态更改禁用选项

Switchery dynamically change disabled option

javascript

jquery

disabled-input

switchery