最近需要使用到bootstrap-switch惦积，查找資料的時(shí)候找了挺久的枝笨，記錄一下相關(guān)的功能层宫，方便自己后續(xù)查看谐丢，直接上代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bootstrap-switch</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" >
<link rel="stylesheet" >
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-switch/3.3.4/js/bootstrap-switch.js"></script>
<style>
.center-vertical {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 450px;
padding: 35px 65px 35px 5px;
background: #fff;
border: 1px solid #eaeaea;
box-shadow: 0 0 25px #cac6c6;
}
</style>
<script>
$(function(){
$(".switch").bootstrapSwitch({
onText:"開啟",
offText:"關(guān)閉",
onColor:"success",
offColor:"default",
size:"small",
onSwitchChange:function(event,state){
console.log("aaaaa");
if(state){
//true 打開
}else{
//false 關(guān)閉
}
}
});
})
function toggleHandle(){
$(".switch").bootstrapSwitch("toggleDisabled");
}
</script>
</head>
<body>
<div class="center-vertical">
<input type="checkbox" class="switch">
<button class="btn btn-default" onclick="toggleHandle()">切換狀態(tài)</button>
</div>
</body>
</html>
