Layui 表单多选模拟单选，checkbox实现radio效果

最新推荐文章于 2024-08-08 07:24:14 发布

SeasmallTop

最新推荐文章于 2024-08-08 07:24:14 发布

阅读量1.4k

点赞数 2

分类专栏： layui

本文链接：https://blog.csdn.net/SeasmallTop/article/details/103664233

版权

layui 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Layui 表单 多选模拟单选，checkbox实现radio效果</title>
    <link rel="stylesheet" href="../assets/libs/layui/css/layui.css" media="all">
</head>
<body>
<div class="layui-form">
    <br>
    <div class="layui-form-item">
        <label class="layui-form-label">选一个你的兴趣爱好</label>
        <div class="layui-input-block" isradio="true">
            <input type="checkbox" lay-skin="primary" lay-filter="cb_r" title="唱">
            <input type="checkbox" lay-skin="primary" lay-filter="cb_r" title="跳">
            <input type="checkbox" lay-skin="primary" lay-filter="cb_r" title="Rap">
            <input type="checkbox" lay-skin="primary" lay-filter="cb_r" title="打篮球">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">选多个你的兴趣爱好</label>
        <div class="layui-input-block" isradio="false">
            <input type="checkbox" lay-skin="primary" lay-filter="cb_r" title="唱">
            <input type="checkbox" lay-skin="primary" lay-filter="cb_r" title="跳">
            <input type="checkbox" lay-skin="primary" lay-filter="cb_r" title="Rap">
            <input type="checkbox" lay-skin="primary" lay-filter="cb_r" title="打篮球">
        </div>
    </div>
</div>
<script src="../assets/libs/layui/layui.js"></script>
<script>
    layui.use(['form', 'layer', 'jquery'], function () {
        var form = layui.form;
        var $ = layui.$;

        form.render();

        // 监听复选框操作，模拟单选
        form.on('checkbox(cb_r)', function (data) {
            let elem = data.elem;
            let parentDom = $(elem).parent();
            let isradio = $(parentDom).attr('isradio');
            let index = $(elem).index('input[type=checkbox]');
            if ('true' == isradio) {
                // 单选
                $(parentDom).children('input[type=checkbox]').prop('checked', false);
                $(elem).prop('checked', true);
                form.render('checkbox');
            } else {
                // 多选什么也不做
            }
        });
    });
</script>
</body>
</html>