Bootstrap--switch

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

前端控件:<input />

前端:

<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);