参考资料

  1. HTML DOM shift键被按下了吗？
  2. HTML DOM 获取第一个链接ID的实例
  3. HTML DOM一个行的innerHTML
  4. HTML DOM禁用和启用下拉列表
  5. HTML DOM 返回一个iframe中的marginwidth属性的值
  6. HTML DOM 根节点childNodes 和 nodeValue
  7. HTML DOM单元格内容水平对齐
  8. HTML DOM 创建一个链接指向一个低分辨率的image

HTML DOM 当点击完button不可用 实例

HTML DOM 按钮点击后禁用实例

详细介绍

通过HTML DOM可以实现在点击按钮后将其禁用，防止用户重复提交或多次点击。这是通过JavaScript修改按钮的disabled属性实现的。

主要标签

  • <button>: 定义可点击的按钮

  • <input type="button">: 另一种形式的按钮

基本用法

document.getElementById("myButton").disabled = true;

完整实例

<!DOCTYPE html>
<html>
<head>
    <title>按钮禁用示例</title>
    <style>
        .disabled-btn {
            opacity: 0.6;
            cursor: not-allowed;
        }
    </style>
</head>
<body>
    <button id="submitBtn" onclick="disableButton()">提交</button>

    <script>
        function disableButton() {
            var btn = document.getElementById("submitBtn");
            btn.disabled = true;
            btn.classList.add("disabled-btn");
            alert("按钮已被禁用");
        }
    </script>
</body>
</html>

功能说明

  1. 点击按钮后立即将其禁用

  2. 防止用户多次点击提交

  3. 常用于表单提交场景

CSS扩展

可以添加样式增强禁用状态的视觉效果：

button:disabled {
    background-color: #cccccc;
    color: #666666;
    border: 1px solid #999999;
}

button:disabled:hover {
    background-color: #cccccc;
    cursor: not-allowed;
}

替代方案

也可以使用jQuery实现：

$("#myButton").prop("disabled", true);
TAG：按钮实例用户详细现在属性主要标签定义形式