首先在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);