请问复选框如何设置为必选

提问 已结
12 170
胡杨vesper
胡杨vesper 2018-9-11
悬赏:20飞吻
版本:layui 浏览器:
如题,内置的验证不支持,我尝试了自定义规则,下面是部分代码,可是仍有不行。有没有大神指点一下,万分感谢!
<div class="layui-col-xs12 layui-col-sm12 layui-col-md12 layui-col-lg12">
<div class="layui-form-item">
<label class="layui-form-label">复选框</label>
<div class="layui-input-block">
<input type="checkbox" lay-filter="mustChoose" lay-verify="mustChecked" lay-verType="tips" name="checkedOne" title="写作"></input>
<input type="checkbox" lay-filter="mustChoose" lay-verify="mustChecked" lay-verType="tips" name="checkedOne" title="阅读"></input>
<input type="checkbox" lay-filter="mustChoose" lay-verify="mustChecked" lay-verType="tips" name="checkedOne" title="发呆"></input>
</div>
</div>
</div>
mustChecked: function(value, item) {
console.log($(item).is(":checked"), 'item----------');
console.log(value, 'value----------');
if (!$("#mustChoose").is(":checked")) {
return "请至少选中一项";
}
}
回帖
  • @胡杨vesper 弄好了,大概是这样子的



    0 回复
  • @岁月神偷 大神,有空吗,指导下小弟[泪]
    0 回复
  • 代号007
    2018-9-11
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layui/src/css/layui.css" media="all">
    <!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
    </head>
    <body>

    <script src="layui/src/layui.js"></script>

    <form class="layui-form" action="">
    <div class="layui-form-item">
    <label class="layui-form-label">选择框</label>
    <div class="layui-input-block tpl-select1">
    <script type="text/html" class="tpl">
    <select>
    <option value="">请选择</option>
    {{# layui.each(d.data,(i,row)=> { }}
    <option value="{{ row.id }}" {{# if(d.selected == row.id){ }}selected{{# } }}>{{ row.name }}</option>
    {{# }); }}
    </select>
    </script>
    </div>
    </div>
    </form>
    <script>
    layui.use(['form','laytpl','jquery'],(form,laytpl,$)=>{
    var d = {
    selected:1,
    data:[
    {id:1,name:'选择一'},
    {id:2,name:'选择二'},
    {id:3,name:'选择三'},
    ]
    };
    console.log(laytpl($('.tpl').html()))
    laytpl($('.tpl').html()).render(d,(html)=>{
    $('.tpl-select1').html(html);
    });
    form.render('select')
    });


    </script>
    </body>
    </html>
    0 回复
  • @岁月如光 大佬 是不是走错片场啦[泪]
    0 回复
  • 目前对于checkbox的校验貌似是有问题的,需要试试看,我记得以前有人分享过,需要将checkbox放在一个div容器里面给这容器添加verify啥的,我这边本地试试看额,还真没做过给checkbox添加校验的相关的要求。
    0 回复
  • @岁月小偷 嗯好的,非常感谢,如果解决了麻烦@ 我,再次感谢
    0 回复
  • 随海逸
    2018-9-11
    你是用的form监听事件的吗?
    0 回复
  • 原理就是把条件放到这些checkox的父容器里面,然后校验的时候你根据自己的业务逻辑,判断这个容器里面的复选框的情况根据需要返回错误信息即可,因为它这一块不是一个输入框啥的,虽然给父节点添加了danger的class了但是它这个样式是需要focus input或者textarea的给border改一下颜色,checkbox的父容器添加了danger也不会有什么特殊的效果,这个要求不高的话用tips提示一下就可以了msg的话会容易找不到是哪个出问题,然后要求高一点可以后面想办法根据这class给做一下文章也能够把校验失败的也给标示出来。
    0 回复
  • 随海逸
    2018-9-11
    @岁月小偷 其实可以提交的时候做个判断,我测了一下,如果复选框没选中任何东西的话,那个name是不会有的,也就是data.field,name==undefined, 我暂时是这么想的,不过没你的那么完善
    0 回复
  • @随海逸 嗯嗯,方案一般有多种哈
    0 回复
  • @岁月小偷 大佬,非常感谢,按照你的思路,问题解决了。最近太忙了,没及时反馈,见谅!贴代码:
    0 回复
  • @胡杨vesper 不客气[微笑] ,能解决问题就好,其他的都是小case,没关系的哈
    0 回复