bootstrap-switch 下载地址:https://github.com/Bttstrp/bootstrap-switch
在使用bootstrap-switch插件过程中,遇到给input框设置属性没有对插件起到作用。比如设置data-size,checked等,但是组件在初始化并不会识别这些参数。导致组件初始化失败,经过查阅网上一些资料,发现了如下解决方法,仅供参考,如果有不对的地方还望指点。
<input type="checkbox" class="status" id="status_1" data-id="1" data-status="0" />
<input type="checkbox" class="status" id="status_2" data-id="2" data-status="1" />
<script type="text/javascript">
$(function(){
// 用于开关组件初始化
$('.status').each(function(){
var id = $(this).data('id');
var status = $(this).data('status');
$(this).bootstrapSwitch({
onColor : "success",
offColor : "warning",
}).bootstrapSwitch('size', "mini").bootstrapSwitch('state', status);
});
// 监听开关状态发生变化时,触发事件
// 如果与初始化放在一起编辑,会导致此事件重复调用
$('.status').bootstrapSwitch("onSwitchChange",function(event,state){
var id = $(this).data('id');
var status = parseInt($(this).attr('data-status'));
if (status != state) {
var check = false;
// 修改状态
$.ajax({
url: "test.php",
async: false,
type: "post",
dataType: "json",
data: {'id': id, 'status': status},
success: function(data){
if (data.code == 1) {
check = true;
$('#status_'+id).attr('data-status', status ? 0 : 1);
layer.msg('更新成功'); //这里是调用了layer弹窗组件
} else {
layer.msg(data.msg);
}
}
});
return check;
}
})
});
</script>
处理方式是:我先对其开关组件进行初始化,然后再设定监听事件,这里不能将监听事件和初始化在一起处理,否则会导致onSwitchChange事件被重复调用。