layui单选框readonly属性怎么加-Layui教程-PHP中文网

layui单选框不支持readonly属性，因其遵循html规范仅支持disabled；禁用应使用disabled并调用form.render()更新ui，表格中需用pointer-events:none配合事件拦截实现视觉与交互禁用。

layui单选框readonly属性怎么加

Layui 的单选框（type: 'radio'）不支持 readonly 属性——它压根不会渲染出带 readonly 的 <input type="radio"> 元素，也不响应该属性。你加了也没用，浏览器会忽略，Layui 也会在渲染时覆盖掉。

为什么不能给 radio 加 readonly

HTML 原生规范中，<input type="radio"> 和 <input type="checkbox"> 都没有 readonly 属性；它们只有 disabled。Layui 完全遵循这个逻辑：它把所有 radio 渲染为自定义 UI（.layui-form-radio），底层 input 只用于状态同步，且只认 disabled。

加 readonly 到 HTML 源码里 → 渲染后消失，控制台可能报 warning
用 JS 设置 elem.readOnly = true → 无效，Layui 不监听 readOnly 变化
想“只读但可聚焦/可复制”？radio 本身就不支持这种交互模式

真正能用的替代方案：用 disabled 控制可操作性

如果你的目标是“禁止用户切换选项”，唯一可靠方式是设 disabled：

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

在列配置中加 disabled: true（仅适用于表单内独立 radio 元素，非表格中的 radio 列）
对已渲染的 radio，用 JS 找到对应 <input type="radio"> 并设 disabled：
```
document.querySelector("input[name='gender'][value='1']").disabled = true;
```
记得调 layui.form.render('radio')，否则 UI 不更新

表格中 type: 'radio' 列怎么“禁用整行”

表格里的 type: 'radio' 是整列受控的，无法单个禁用某一行的 radio。常见做法是：

在 cols 中该列配置 unresize: true, style: 'pointer-events: none;'，视觉上灰掉 + 点击失效
监听 table.on('radio(filter)')，在回调里判断当前行是否允许选择，若不允许则 return false 或手动取消：
```
obj.tr.find("input[type='radio']").prop("checked", false);
```
注意：disabled 属性对表格 radio 列无效，别白费劲加

真正要小心的是混淆“视觉禁用”和“数据锁定”——disabled 会让该字段不参与表单提交，而单纯隐藏或加样式不会。如果只是不想让用户点，又得保留提交值，就得靠事件拦截 + 手动控制 checked 状态，而不是依赖任何只读语义。