使用jquery實現BootstrapSwitch將複選框和單選按鈕變成切換開關方法

html代碼

<div class="form-group">
                                <label class="control-label col-md-2 col-sm-2 col-xs-12">是否需要物料</label>
                                <div class="col-md-5 col-sm-5 col-xs-12">
                                    <i style="font-size: 30px;color: #696969;" class="switchEarly fa fa-toggle-off"
                                       onclick="openModebtn('material')" id="mode_fa_material"></i>
                                    <input type="hidden" id="open_material" name="open_material" value="0">
                                </div>
                            </div>



 <div class="form-group">
                                <label class="control-label col-md-2 col-sm-2 col-xs-12">是否需要報名</label>
                                <div class="col-md-5 col-sm-5 col-xs-12">
                                    <i style="font-size: 30px;color: #696969;" class="switchEarly fa fa-toggle-off"
                                       onclick="openModebtn('enroll')" id="mode_fa_enroll"></i>
                                    <input type="hidden" id="open_enroll" name="open_enroll" value="0">
                                </div>
                            </div>

jquery代碼

<script>

    //公用點擊開啓關閉按鈕
    function openModebtn(modename) {
        var open_mode = $("#open_" + modename).val();
        if (open_mode == 1) {
            //關閉
            $("#mode_fa_" + modename).attr('class', 'switchEarly fa fa-toggle-off');
            $("#mode_fa_" + modename).attr('style', 'font-size: 30px;color: #696969;');
            $("#open_" + modename).val(0);
        } else {
            //開啓
            $("#mode_fa_" + modename).attr('class', 'switchEarly fa fa-toggle-on');
            $("#mode_fa_" + modename).attr('style', 'font-size: 30px;color: #00FA9A;');
            $("#open_" + modename).val(1);
        }
    }

</script>

可以實現同一個js控制多個開關按鈕