layui禁用checkbox

最新推荐文章于 2024-06-05 09:55:19 发布

太空漫步11

最新推荐文章于 2024-06-05 09:55:19 发布

阅读量741

点赞数 21

文章标签： layui 前端 javascript

本文链接：https://blog.csdn.net/zhourongxiang1/article/details/136947903

版权

文章描述了一个HTML表单中，如何通过jQuery和layui库实现当用户选择特定假期类型时，其他相关假期类型的复选框被禁用的功能。

摘要由CSDN通过智能技术生成

表单中有请假类型复选框。
在这里插入图片描述

现要求如下：

选了年假，其它假期类型禁用。
选了调休假，其它假期类型禁用。
选了其它假期类型，不可以选年假和调休假。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="//unpkg.com/layui@2.9.7/dist/css/layui.css" rel="stylesheet">
</head>

<body>
    <form class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">请假类型</label>
            <div class="layui-input-block " id="div1">
                <input type="checkbox" name="type" title="年假" lay-filter="demo-checkbox-filter">
                <input type="checkbox" name="type" title="调休假" lay-filter="txj">
                <input type="checkbox" name="type" title="病假" lay-filter="other">
                <input type="checkbox" name="type" title="事假" lay-filter="other">
                <input type="checkbox" name="type" title="婚假" lay-filter="other">
                <input type="checkbox" name="type" title="产假" lay-filter="other">
                <input type="checkbox" name="type" title="育儿假" lay-filter="other">
            </div>
        </div>



    </form>

    <!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
    <script src="//unpkg.com/layui@2.9.7/dist/layui.js"></script>
    <script>
        layui.use(function() {
            var form = layui.form;
            var $ = layui.$;

            function disableAll() {
                $('#div1').children().attr('disabled', 'disabled');
                form.render($('#div1').children());
            }
            form.on('checkbox(demo-checkbox-filter)', function(data) {
                var elem = data.elem; // 获得 checkbox 原始 DOM 对象
                var checked = elem.checked; // 获得 checkbox 选中状态
                if (checked) {
                    disableAll();
                    $('#div1').children().first().removeAttr('disabled');
                    form.render($('#div1').children().first());
                }

            });

            form.on('checkbox(txj)', function(data) {
                if (data.elem.checked) {
                    disableAll();
                    $('#div1').children().eq(2).removeAttr('disabled');
                    form.render($('#div1').children().eq(2));
                }
            });

            form.on('checkbox(other)', function(data) {
                if (data.elem.checked) {
                    $('#div1').children().first().attr('disabled', 'disabled');
                    $('#div1').children().eq(2).attr('disabled', 'disabled');
                    form.render($('#div1').children().first());
                    form.render($('#div1').children().eq(2));
                }
            });
        });
    </script>

</body>

</html>