layui的复选框怎么设置只能单选

简介: layui的复选框怎么设置只能单选
<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>
//复选框监听事件(只能单选)
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”,才有效果


相关文章
|
7月前
|
JavaScript
使用layui checkbox复选框样式实现单选功能
使用layui checkbox复选框样式实现单选功能
444 0
全选或者单选checkbox的值动态添加到div
全选或者单选checkbox的值动态添加到div
59 0
|
8月前
《vue3实战》运用radio单选按钮或Checkbox复选框实现单选多选的试卷制作
《vue3实战》运用radio单选按钮或Checkbox复选框实现单选多选的试卷制作
复选框checkbox实现自定义样式
复选框checkbox实现自定义样式
73 1
50zTree - 带 radio 的单选下拉菜单
50zTree - 带 radio 的单选下拉菜单
61 1
单选、全选、反选、获得所有选中的checkbox
单选、全选、反选、获得所有选中的checkbox
49zTree - 带 checkbox 的多选下拉菜单
49zTree - 带 checkbox 的多选下拉菜单
44 0
|
JavaScript 前端开发
layui复选框checkbox全选和获取值的解决方案
layui复选框checkbox全选和获取值的解决方案
1153 0
|
JavaScript
element checkbox复选框实现全选功能
element checkbox复选框实现全选功能

热门文章

最新文章

下一篇
开通oss服务