bootstrap-switch,切换触发事件及动态切换以及readonly属性设置

注意不能再<input type="checkbox" name="switch">中添加readonly或者disabled属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"><link href="https://cdn.bootcss.com/bootstrap-switch/3.3.4/css/bootstrap3/bootstrap-switch.css" rel="stylesheet"><style>.center{text-align: center;margin-top: 100px;}#state{font-size: 20px;color: black;font-family: "Adobe 黑体 Std R";font-weight: bold;}.btn{width: 60px;}</style>
</head>
<body><div class="center"><input type="checkbox" name="switch"><p id="state"></p><br><button type="button" class="btn btn-primary" id="on">on</button><button type="button" class="btn btn-warning" id="off">off</button></div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-switch/3.3.4/js/bootstrap-switch.js"></script>
<script>$("input[name='switch']").bootstrapSwitch({onText: "开启",offText: "关闭",onSwitchChange: function (event, state) {//监听switch change事件，可以根据状态把相应的业务逻辑代码写在这里if (state == true) {$("#state").html('switch turn no');$(this).val("0");} else {$("#state").html('switch turn off');$(this).val("1");}}})//两个按钮点击动态切换bootsrap开关状态$("#on").click(function(e){$("input[name='switch']").bootstrapSwitch("state",true);})$("#off").click(function(e){$("input[name='switch']").bootstrapSwitch("state",false);})
</script>
</html>

如果有这样一个需求。根据某个值，去设置switch按钮的state后，并且想让其不可再点击滑动，可这样写。

// 每次执行js前先初始化readonly位false。如果没有这句，执行下面某个if语句后，另外一个if语句的readonly设置就无效了
$("#status").bootstrapSwitch("readonly", false);if(data.data.status=='0'){$("#status").bootstrapSwitch("state", true);$("#status").bootstrapSwitch("readonly", true);}if(data.data.status=='1'){$("#status").bootstrapSwitch("state", false);$("#status").bootstrapSwitch("readonly", true);}

转载于https://www.cnblogs.com/guofx/p/11198292.html

bootstrap-switch,切换触发事件及动态切换以及readonly属性设置相关推荐

QTP鼠标点击和浏览器事件的动态切换
今天在群里有人问到一个问题,我觉得应该会有很多人会碰到,今天根据自己的思路把这个解决方案整理出来,供自己和大家参考需求描述: 当输入一个身份证号码的时候,这个号码所对应的数据会被加载到所属的省和市的 ...
Selenium一些特殊情况的处理：失去焦点、点击不生效、长页面处理、先触发事件才能动态加载的元素、日期输入
Selenium一些特殊情况的处理失去焦点focus 有时候click()或者send_keys(),没有反应.那是因为失去了焦点.使用driver. switch_to_active_elemen ...
android系统动态切换输入法,一种动态切换Android系统输入法的弹出模式的方法与流程...
技术特征: 1.一种动态切换Android系统输入法的弹出模式的方法,其特征在于,包括步骤如下: (1)初始状态下,即软键盘和表情面板都未展开时,为表情面板设置一个默认高度,默认高度的取值范围是230 ...
android自动切换输入法,一种动态切换Android系统输入法的弹出模式的方法
主权项: 1.一种动态切换Android系统输入法的弹出模式的方法,其特征在于,包括步骤如下:(1)初始状态下,即软键盘和表情面板都未展开时,为表情面板设置一个默认高度,默认高度的取值范围是230dp ...
springboot+redis切换指定数据库or动态切换数据库
redis切换数据库项目使用指定的数据库项目中动态切换数据库项目使用指定的数据库需求1: 甲方有很多系统用redis,我们这个系统需要指定用到4数据库在配置文件中设置数据库 spring:r ...
echarts切换折线图变大_Echarts折线图属性设置大全
Echarts折线图属性设置大全 var option = { backgroundColor: '#FFF0F5', title: { text: '折线图', subtext: '模拟数据', x ...
android drawable 点击事件,Android中EditText的drawableRight属性设置点击事件
这个方法是通用的,不仅仅适用于edittext,也适用于textview.autocompletetextview等控件. google官方api并没有给出一个直接的方法用来设置右边图片的点击事件,所 ...
vue动态判断input readonly属性
1.如果isReadOnly等于true时,input只读,否则可以编辑 <input v-bind:readonly="isReadOnly"> 2.如果Travel ...
同频切换的事件_LTE前台路测切换问题处理大礼包
在LTE优化前台路测过程中,会遇到各种各样的切换问题,以下是个人见解的总结,欢迎学习交流. 前台路测过程中,最常见的切换有以下几类:基于Uu口的站内切换.基于X2口的站间切换,还可以根据切换小区的频点 ...

bootstrap-switch,切换触发事件及动态切换以及readonly属性设置

bootstrap-switch,切换触发事件及动态切换以及readonly属性设置相关推荐

最新文章

热门文章