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);
- 上一篇 »Java switch的用法
- 下一篇 »css---switch开关