Switcheryは、動的に無効にオプションを変更

Question

私はこのようなSwitcheriesに変換されているページに複数のチェックボックスがあります。

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

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

は、だから私は最終的にマークアップ持っているが

イベントの後にこれらのスイッチを動的に無効にするか有効にしたいとします。しかし、ページ上に複数のswitcheriesがあるので、私は正しく、無効にするswitcheryを選択することはできませんし、次のコードは、私のために動作しません：

$(".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の新しいインスタンスを作成するときに次のようなマップに保存することができます：あなたは、現在の要素のSwitcheryを使用する必要があるときに、インスタンスを取得することができ、このように

swObjs[element.id] = init; 

：

を

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>