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">
<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' 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() {
// 输入框和多行文本框
$('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);
// 1. 仅处理当前select的父元素
$select.parent().addClass('readonly');
// 2. 仅删除当前select中的未选中选项
$select.find('option:not(:selected)').remove();
// 3. 阻止下拉菜单交互（可选，根据需求）
$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>
效果图：
浙公网安备 33010602011771号