Bootstrap--switch

首先在head中引入<link href="../assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" />

前端控件：<input id="ckbCut"   runat="server" name="ckbCtype" type="checkbox" class="make-switch" data-size="small" data-on-text="是" data-off-text="否"  />

前端：

<script>

$(document).ready(function () {

//初始化switch插件
$(".make-switch").each(function () {
$(this).bootstrapSwitch();
});

if ($("#ckbCut").is(":checked")) {
$("#cutpayment").show();
} else {
$("#cutpayment").hide();
}

$("#ckbCut").on('switchChange.bootstrapSwitch', function (e, data) {
if (data) {
//将按钮设为未选中状态

说明：给按钮设置状态的时候，按钮的状态必须是可用的，否则不会起作用
$("#ckbCut").bootstrapSwitch('state', false, true);
} else {
//将按钮设为选中状态
$("#ckbCut").bootstrapSwitch('state', true, true);

}

//禁用

$("#ckbCut").bootstrapSwitch('disabled',false);

 

//可用

$("#ckbCut").bootstrapSwitch('disabled',true);

});

 

});

</script>

因为bootstrap-switch.min.css插件的版本不一样，用法可能也会不一样

后台：

获取控件的值：ckbCut.Checked

给控件赋值：ckbCut.Checked = DBConvert.ToBoolean(pay.IsDeduct);

 

转载于:https://www.cnblogs.com/liuruiyun/p/6567275.html