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事件被重复调用。