bootstrap-switch使用按钮控制是否可用

最新推荐文章于 2024-03-21 09:35:52 发布

发光的树

最新推荐文章于 2024-03-21 09:35:52 发布

阅读量532

点赞数

分类专栏： bootstrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/csdn1642816671/article/details/100115501

版权

bootstrap 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

通过页面的触发的时间来控制switch插件是否可用

<!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" href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
		<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-switch/3.3.4/css/bootstrap3/bootstrap-switch.css">
		<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:"关闭",
					onColor:"success",
					offColor:"default",
					size:"small",
					onSwitchChange:function(event,state){
						console.log("aaaaa");
						if(state){
							//true 打开
						}else{
							//false 关闭
						}
					}
				});
			})
			
			function toggleHandle(){
				$(".switch").bootstrapSwitch("toggleDisabled");
			}
			
		</script>
	</head>
	<body>
		<div class="center-vertical">
			<input type="checkbox" class="switch">
			<button class="btn btn-default" onclick="toggleHandle()">切换状态</button>
		</div>	
	</body>
</html>

发光的树

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap-switch使用按钮控制是否可用

通过页面的触发的时间来控制switch插件是否可用<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>bootstrap-switch</title> <script src="https://code.jquery.com/jque...
复制链接

扫一扫