如何对switchery.min.js美化的checkbox用动态控制开关

《如何对switchery.min.js美化的checkbox用动态控制开关》要点：
本文介绍了如何对switchery.min.js美化的checkbox用动态控制开关，希望对您有用。如果有疑问，可以联系我们。

今天遇到一个需求：2个不相关的按钮选项，只能选择一个，

而这2个按钮是经过switchery.min.js美化的，简化的界面如下：

这种问题只要找到插件回调函数即可， 但是在switchery.min.js官网上（http://abpetkov.github.io/switchery/）

好像并没有找到控制switchery开关的，

只有一个是disabled控制相近的，

 switchery.disable();

但是这个是让按钮失效（不可选状态，除非用脚本再还原可选状态），并不是我们要的开关，可以随时用鼠标切换。

另外有一个是用来判断按钮是否选中，可以使用：

 fromContent.checked

我们只能用.click()来模拟点击。问题可解决。代码如下：

一、HTML部分：

<link rel=stylesheet href=/public/ACE/assets/css/bootstrap.css />
<script type=text/javascript src=/public/js/jquery-2.1.4.min.js></script>
<link rel=stylesheet href=/public/js/third-party/switchery/switchery.min.css />
<script src=/public/js/third-party/switchery/switchery.min.js></script>

<br clear=all/><hr />
<form id=form1 name=form1 action=/t.php method=post />
<h2>以下2项只能选一项：</h2>
<div class=col-md-3>
       <label for= class=col-md-6 control-label style=padding-right: 0;padding-top: 0;>选项1</label>
       <div class=col-md-4 style=padding-top:  0;>
              <input  name=fromurl id=fromurl value=1 class=switch-fromurl col-md-2 type=checkbox>
       </div>
</div>
<div class=col-md-3>
       <label for= class=col-md-6 control-label style=padding-right: 0;padding-top: 0;>选项2</label>
       <div class=col-md-4 style=padding-top:  0;>
              <input  name=fromContent id=fromContent value=1 class=switch-fromContent col-md-2 type=checkbox>
       </div>
</div>
<br clear=all/><hr />
<div class=col-md-3>
       <button type=submit class=btn btn-primary btn-lg btn-block id=subset><i class=fa fa-envelope></i> 提交设置</button>
</div>
</form>

二、JS部分：

<script type=text/javascript>
$(function(){
       if($('.switch-fromurl').length>0){
              var fromurl = document.querySelector('.switch-fromurl');
              var swfromurl = new Switchery(fromurl,{ size: 'small' , color: '#5555ff', jackColor: '#ceceff', secondaryColor: '#ccc'});

              //if($('.switch-fromContent').length>0){
              var fromContent = document.querySelector('.switch-fromContent');
              var swfromContent = new Switchery(fromContent, secondaryColor: '#ccc'});

              fromurl.onchange = function() {
                     if( fromurl.checked && fromContent.checked ) $(fromContent).click();
              };
              fromContent.onchange = function() {
                     if( fromContent.checked && fromurl.checked ) $(fromurl).click();
              };
       }
});
</script>