JavaScript控制按钮可用或不可用的方法

核心原理：disabled属性

HTML中的表单元素（如, 等）支持一个名为disabled的属性。这是一个布尔值属性：

• 当设置为true时，元素变为灰色且不可点击、不可聚焦。
• 当设置为false时，元素恢复可交互状态。

通过JavaScript获取对应DOM节点并修改该属性，是实现这一功能的直接方式。

操作示例：禁用特定按钮

以下代码展示了一个完整的HTML页面，其中包含两个普通按钮和一个用于触发动作的控制按钮。目标是点击“Disable button”后，使第一个按钮变灰不可用。

第1步：构建基础HTML结构

首先定义包含目标按钮和触发按钮的HTML结构。确保为需要控制的按钮赋予唯一的id，以便后续通过脚本定位。

<!DOCTYPE html>
<html>
<body>
<form>
Buttons:
<!-- 目标按钮，ID为 firstbtn -->
<input type="button" id="firstbtn" value="OK">
<input type="button" id="secondbtn" value="OK">
</form>
<p>Click the button below to disable the first button above.</p>
<!-- 触发按钮，绑定 onclick 事件 -->
<button onclick="disableElement()">Disable button</button>
<script>
function disableElement()
{
document.getElementById("firstbtn").disabled=true;
}
</script>
</body>
</html>

第2步：编写控制逻辑

在<script>标签中定义函数disableElement()。函数内部执行以下步骤：

1. 使用document.getElementById(