Search code examples
jqueryswitchery

How to dynamically change to disable the switchery using jquery


May I ask who knows how to change the switchery? For example I have a parent switch that will disable it's child switch if the parent switch is turned off

The page is working fine but I couldn't figure out the jquery to do the dynamic change for the switch if the parent switch is off. Thank you in advance for your answers

if ($(".js-switch")[0]) {
    var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));
    elems.forEach(function (html) {
        var switchery = new Switchery(html, {
            color: '#26B99A'
        });
    });
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="checkbox" class="js-switch" name="write[33]" id="write[33]"  />
  <label class="onoffswitch-label" for="write[33]">
  <span class="onoffswitch-inner"></span>
  <span class="onoffswitch-switch"></span>
</label>
<input type="checkbox" class="js-switch" name="write[34]" id="write[34]"  />
  <label class="onoffswitch-label" for="write[34]">
  <span class="onoffswitch-inner"></span>
  <span class="onoffswitch-switch"></span>
</label>
<input type="checkbox" class="js-switch" name="write[35]" id="write[35]"  />
  <label class="onoffswitch-label" for="write[35]">
  <span class="onoffswitch-inner"></span>
  <span class="onoffswitch-switch"></span>
</label>


Solution

  • Try this

    $('.js-switch').each(function(idx, elm) {
      new Switchery(elm, {
        color: '#26B99A'
      });
    });
    $('.js-parent').on('change', function() {
      $('.js-child').each(function() {
        this.click();
      });
    });
    <link href="https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <input type="checkbox" class="js-switch js-parent" /> Parent
    <br><br>
    <input type="checkbox" class="js-switch js-child" /> Child 1
    <input type="checkbox" class="js-switch js-child" /> Child 2