HTML历理 Layui全表单元素自动禁用 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layui 全表单元素自动禁用</title>
<link rel="stylesheet" href="/_/_js/katex/katex.min.css">
<link rel="stylesheet" href="/_/_js/layui/css/layui.css">
<link rel="stylesheet" href="/_/_css/base.css">
</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' value='gfdgdf' autocomplete='off' 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="checkbox" name="hobby" value="read" checked title="阅读">
            <input type="checkbox" id="checkbox" name="hobby" value="read" title="学习">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">单选框</label>
        <div class="layui-input-block">
            <input type="radio" id="radio" name="gender" value="male" checked title="男">
            <input type="radio" id="radio" name="gender" value="male" 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 defer src="/_/_js/katex/katex.min.js"></script>
<script defer src="/_/_js/katex/contrib/auto-render.min.js"></script>
<script src="/_/_js/foot.js"></script>
<script>
layui.use(['form', 'layer'], function() {
    var form = layui.form;
    var layer = layui.layer;
    var $ = layui.jquery; // 统一使用 layui.jquery

    //日期与时间选择器
    var laydate = layui.laydate;
    laydate.render({
        elem: '#birth'
    });

    // 页面加载后立即设置所有元素为只读
    $(function() {
        // 1. 处理文本输入框和文本域
        $('input:not([type="checkbox"], [type="radio"], [type="file"]), textarea')
            .prop('disabled', true);

        // 2. 处理下拉菜单
        $('select').prop('disabled', true);

        // 3. 处理复选框和单选框
        $('input[type="checkbox"], input[type="radio"]').prop('disabled', true);

        // 4. 处理文件上传组件
        $('input[type="file"]').prop('disabled', true);

        // 5. 处理按钮
        $('button').each(function() {
            var $btn = $(this);
            if (!$btn.hasClass('layui-btn-disabled')) {
                $btn.addClass('layui-btn-disabled').attr('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 02:30  onestopweb  阅读(72)  评论(0)    收藏  举报