【问题标题】:How to dynamically change to disable the switchery using jquery如何使用jquery动态更改以禁用切换器
【发布时间】:2019-10-28 09:52:00
【问题描述】:

请问谁知道如何更换开关? 例如,如果父开关关闭,我有一个父开关将禁用它的子开关

页面工作正常,但如果父开关关闭,我无法确定 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>

【问题讨论】:

  • 感谢@mplungjan 我已经编辑了问题

标签: jquery switchery


【解决方案1】:

试试这个

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

【讨论】:

猜你喜欢
  • 2023-03-27
  • 2023-03-08
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2023-03-11
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多