参考资料

  1. HTML DOM 返回一个锚的名字 实例
  2. HTML DOM 返回文档的完整的URL实例
  3. HTML DOM 改变iframe的高度和宽度
  4. HTML DOM 修改
  5. HTML DOM禁用和启用下拉列表
  6. HTML DOM 返回文档中表单数目
  7. HTML DOM 对iframe排版
  8. HTML DOM弹出下拉列表中被选中的选项的索引

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：按钮实例用户详细现在属性主要标签定义形式