HTML表单disabled怎么用_HTML表单元素disabled禁用属性的作用与设置-html教程-PHP中文网

HTML表单disabled怎么用_HTML表单元素disabled禁用属性的作用与设置

絕刀狂花

发布： 2025-11-20 22:19:14

原创

708人浏览过

disabled属性用于禁用表单元素，使其不可操作且提交时不发送值；可通过HTML直接添加或JavaScript动态控制；与readonly不同，disabled使元素完全不可用且不提交数据，而readonly仅限制编辑但保留值提交。

html表单disabled怎么用_html表单元素disabled禁用属性的作用与设置

在HTML表单中，disabled 是一个常用的布尔属性，用于禁用表单元素，使其无法被用户操作。被禁用的元素不会响应点击、输入等交互行为，并且在表单提交时，其值不会被发送到服务器。

disabled属性的作用

给表单元素添加 disabled 属性后，会产生以下效果：

元素变为灰色，视觉上提示用户不可操作
用户无法点击、输入或选择该元素
表单提交时，该元素的 name 和 value 不包含在请求数据中
通常用于临时锁定某些选项，如未满足条件的提交按钮或配置项

如何设置disabled属性

可以直接在HTML标签中添加 disabled 属性，无需赋值（布尔属性）：

也可以通过JavaScript动态控制：

立即学习“前端免费学习笔记（深入）”；

幻舟AI

专为短片创作者打造的AI创作平台

279

查看详情

document.getElementById("myInput").disabled = true; document.getElementById("myInput").disabled = false;

例如，根据复选框状态启用/禁用输入框：

<input type="checkbox" id="agree" onchange="toggleInput()"> <label for="agree">同意条款</label> <input type="text" id="nameInput" placeholder="请输入姓名" disabled> <script> function toggleInput() { const checkbox = document.getElementById("agree"); const input = document.getElementById("nameInput"); input.disabled = !checkbox.checked; } </script>