如何实现按钮仅可点击一次？点击其一禁用另一个按钮

你可以通过给按钮添加ID，并编写简单的JavaScript逻辑来实现需求：点击任意一个按钮后，同时禁用两个按钮（既保证当前按钮只能点一次，也禁用另一个未点击的按钮）。我已经将代码里的英文文本翻译成中文，以下是修改后的完整代码：

<div style="position:absolute; left:625px; top:100px; background-color:white;">
    <button type="button" id="detainBtn" onclick="handleDetain()">扣留</button>
    <button type="button" id="freeBtn" onclick="handleFree()">释放他们</button>
</div>

<script>
function handleDetain() {
    // 弹出提示
    alert('那人失望地走开了，我觉得自己做了错误的决定');
    // 禁用两个按钮
    document.getElementById('detainBtn').disabled = true;
    document.getElementById('freeBtn').disabled = true;
}

function handleFree() {
    // 弹出提示
    alert('那人松了口气，看起来很高兴。守卫将他引导到出口。我觉得自己做了正确的决定');
    // 禁用两个按钮
    document.getElementById('detainBtn').disabled = true;
    document.getElementById('freeBtn').disabled = true;
}
</script>

逻辑说明： #

• 给每个按钮添加唯一id，方便JavaScript精准获取元素
• 每个按钮的点击事件函数中，先执行提示弹窗，再将两个按钮的disabled属性设为true——这会让按钮变为灰色不可点击状态，同时无法触发点击事件，完美满足「仅可点击一次」和「点击一个禁用另一个」的需求

如果需要自定义禁用状态的样式，可以给按钮添加CSS类，比如：

button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

这样能更直观地提示用户按钮已不可用。

内容的提问来源于stack exchange，提问作者ToMadToCode