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' 
       }); 
      }); 
     }); 

그래서 나는 결국 마크 업이를

일부 이벤트 후에 이러한 전환을 동적으로 사용하지 않도록 설정하거나 사용하도록 설정하려고합니다.

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

내가 예상대로 작동하도록 할 수 있습니다 거기에 페이지에 여러 switcheries는, 다음과 같은 코드는 나를 위해 작동하지 않기 때문에 그러나 나는 제대로 비활성화 할 switchery을 선택할 수 없습니다?

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>