《如何對switchery.min.js美化的checkbox用動態控制開關》要點：
本文介紹了如何對switchery.min.js美化的checkbox用動態控制開關，希望對您有用。如果有疑問，可以聯系我們。

相關主題：JS、Jquery插件

今天遇到一個需求：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,{ size: 'small' , color: '#5555ff', jackColor: '#ceceff', secondaryColor: '#ccc'});

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

轉載請注明本頁網址：
http://www.snjht.com/jiaocheng/164.html