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”,才有效果


相关文章
|
2月前
《vue3实战》运用radio单选按钮或Checkbox复选框实现单选多选的试卷制作
《vue3实战》运用radio单选按钮或Checkbox复选框实现单选多选的试卷制作
|
6月前
全选或者单选checkbox的值动态添加到div
全选或者单选checkbox的值动态添加到div
26 0
|
5月前
表单单选框,多选框美化
之前总是匆匆看过,如今终于知道该怎么搞了。。。 **利用label挂钩checkbox的特点来实现。 当html代码中,label的for属性值和checkbox的id值一样的时候,label就可以控制checkbox的选择了。
19 0
|
6月前
复选框checkbox实现自定义样式
复选框checkbox实现自定义样式
26 1
|
6月前
layUI 选中表格 checkbox
layUI 选中表格 checkbox
|
6月前
单选、全选、反选、获得所有选中的checkbox
单选、全选、反选、获得所有选中的checkbox
|
7月前
50zTree - 带 radio 的单选下拉菜单
50zTree - 带 radio 的单选下拉菜单
21 1
|
7月前
49zTree - 带 checkbox 的多选下拉菜单
49zTree - 带 checkbox 的多选下拉菜单
23 0
|
10月前
|
JavaScript 前端开发
layui复选框checkbox全选和获取值的解决方案
layui复选框checkbox全选和获取值的解决方案
541 0
|
10月前
|
JavaScript
element checkbox复选框实现全选功能
element checkbox复选框实现全选功能