Как динамически изменить, чтобы отключить коммутатор с помощью jquery - PullRequest
Новая
       31

Как динамически изменить, чтобы отключить коммутатор с помощью jquery

1 голос
/ 28 октября 2019

Могу я спросить, кто знает, как сменить коммутатор? Например, у меня есть родительский переключатель, который отключит его дочерний переключатель, если родительский переключатель выключен

Страница работает нормально, но я не смог понять jquery для выполнения динамического изменения для переключателя, еслиродительский переключатель выключен. Заранее благодарю за ответы 

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>

1 Ответ

0 голосов
/ 29 октября 2019

Попробуйте это 

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