layui禁用选择框

最新推荐文章于 2024-09-19 11:13:48 发布

太空漫步11

最新推荐文章于 2024-09-19 11:13:48 发布

阅读量508

点赞数 6

文章标签： layui 前端 javascript jquery

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

版权

政治面貌选择框选择党支部，清空团支部选择框，禁用团支部选择框。
政治面貌选择框选择团支部，清空团支部选择框，禁用党支部选择框。

<!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" action="" lay-filter="demo-val-filter">

        <div class="layui-form-item">
            <label class="layui-form-label">政治面貌</label>
            <div class="layui-input-inline layui-input-wrap">
                <select lay-filter="face" name="face">
                    <option value="">请选择</option>
                    <option value="f1">党员</option>
                    <option value="f2">团员</option>
                    <option value="f3">群众</option>
                  </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">党支部</label>
            <div class="layui-input-inline layui-input-wrap">
                <select lay-filter="dang" id="party" name="party">
                    <option value="">请选择</option>
                    <option value="p1" selected>党支部 1</option>
                    <option value="p2">党支部 2</option>
                    <option value="p3" >党支部 3</option>
                  </select>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">团支部</label>
            <div class="layui-input-inline layui-input-wrap">
                <select lay-filter="team" name="team" id="team">
                    <option value="" id="t0">请选择</option>
                    <option value="t1" selected>团支部 1</option>
                    <option value="t2">团支部 2</option>
                    <option value="t3">团支部 3</option>
                  </select>
            </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 layer = layui.layer;
            var $ = layui.jquery;
            // select 事件
            form.on('select(face)', function(data) {
                var value = data.value; // 获得被选中的值
              
                if (value == 'f1') { //选择党员
                    //团支部选择框的值设置为空
                    $('#team').children().first().attr('selected', 'selected');
                    //禁用团支部team
                    $('#team').attr('disabled', 'disabled');
                    //重新渲染表单中的团支部选择框
                    form.render($('#team'));

                } else if (value == 'f2') {
                    //党支部选择框的值设置为空
                    $('#party').children().first().attr('selected', 'selected');
                    //禁用团支部team
                    $('#party').attr('disabled', 'disabled');
                    //重新渲染表单中的团支部选择框
                    form.render($('#party'));
                }
           });
        });
    </script>
</body>

</html>