摘要:
做项目的时候,有时候根据开发需求需要,checkbox只能设置单选,不能同时选中多个,那么怎么解决呢?不多说,直接看代码。
html示例代码:
<div class="layui-form">
<input name="checkone" lay-skin="primary" title="F011" type="checkbox">
<input name="checkone" lay-skin="primary" title="F012" type="checkbox">
</div>
js示例代码:
//复选框监听事件(只能单选)
form.on('checkbox',function(data){
var oldState = data.elem.checked // 记录状态
var elName = data.elem.name || '' // 取当前名称
$("input[name='"+elName+"']").prop("checked", false); //全部取消选中(name要一致)
$(this).prop("checked", true); //勾选当前选中的选择框
if(!oldState){ // 如果是flase表示点击的是之前已被选中的那个
$(this).prop("checked", false); // 取消勾选当前的
}
form.render('checkbox'); //重新渲染
});
注意:layui的form监听事件,需要添加class="layui-form"
,才有效果。
演示效果: