HTML历理 Layui全表单元素自动只读修改版 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui 全表单元素自动只读</title>
    <link rel="stylesheet" href="/_/_js/layui/css/layui.css">
    <style>
        /* 只读元素通用样式 */
        .layui-form-item.readonly .layui-input,
        .layui-form-item.readonly .layui-textarea,
        .layui-form-item.readonly .layui-form-select .layui-input {
            background-color: #f5f5f5 !important;
            color: #666 !important;
            border-color: #e6e6e6 !important;
            user-select: none !important;
        }

        /* 复选框/单选框只读样式 */
        .layui-form-item.readonly .layui-form-checkbox,
        .layui-form-item.readonly .layui-form-radio {
            pointer-events: none !important;
            opacity: 0.7 !important;
        }
    </style>
</head>
<body>
<div class="layui-container">
    <form class="layui-form" id="readonlyForm">
        <div class="layui-form-item">
            <label class="layui-form-label">文件上传</label>
            <div class="layui-input-block">
                    <input type="file" name="picfile" id="picfile" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">输入框</label>
            <div class="layui-input-block">
                <input type="text" id="input" class="layui-input" value="只读输入框">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">多行文本框</label>
            <div class="layui-input-block">
                <textarea id="textarea" class="layui-textarea">只读多行文本</textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">下拉菜单</label>
            <div class="layui-input-block">
                <select id="select" name="role">
                    <option value="1">管理员</option>
                    <option value="2" selected>普通用户</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">复选框</label>
            <div class="layui-input-block">
                <input type="checkbox" id="checkbox1" name="hobby" value="read" checked title="阅读">
                <input type="checkbox" id="checkbox2" name="hobby" value="study" title="学习">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">单选框</label>
            <div class="layui-input-block">
                <input type="radio" id="radio1" name="gender" value="male" checked title="男">
                <input type="radio" id="radio2" name="gender" value="female" title="女">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn">
                    <i class="layui-icon layui-icon-ok"></i>提交表单
                </button>
            </div>
        </div>
    </form>
</div>

<script src="/_/_js/layui/layui.js"></script>
<script>
    layui.use(['form', 'layer'], function() {
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;

        // 页面加载后立即设置所有元素为只读
        $(function() {
            // 输入框和多行文本框
            $('input:not([type="checkbox"], [type="radio"], [type="file"]), textarea').each(function() {
                $(this).prop('readonly', true);
                $(this).closest('.layui-form-item').addClass('readonly');
            });

            // 下拉菜单
            $('select').each(function() {
                var $select = $(this);
                $select.parent().addClass('readonly');
                $select.find('option:not(:selected)').remove();
                $select.on('click focus', function(e) {
                    e.preventDefault();
                });
            });

            // 复选框和单选框
            $('input[type="checkbox"], input[type="radio"]').each(function() {
                var $item = $(this);
                $item.on('click', function(e) {
                    e.preventDefault();
                });
                $item.closest('.layui-form-item').addClass('readonly');
            });

            // 文件上传框 - 改进的处理方式
            $('input[type="file"]').prop('disabled', true);

            // 刷新 Layui 表单渲染
            form.render();
        });

        // 表单提交演示
        $('#readonlyForm').on('submit', function(e) {
            e.preventDefault();
            var data = $(this).serialize();
            layer.msg('提交的数据：' + data);
        });
    });
</script>
</body>
</html>

效果图：

posted @ 2025-05-19 03:10  onestopweb  阅读(59)  评论(0)    收藏  举报