如何用discord.py机器人实现点击按钮禁用其他指定按钮？

开发者阿泽

2026-8-1

实现点击按钮禁用另一个按钮的方案

以下是几种主流技术栈下的实现方式，根据你的项目环境选择即可：

原生JavaScript

核心思路是获取目标按钮的DOM元素，在触发按钮的点击事件中修改目标按钮的disabled属性：

// 确保DOM加载完成后执行代码
document.addEventListener('DOMContentLoaded', function() {
  // 获取两个按钮元素（替换成你实际的ID或选择器）
  const statsBtn = document.getElementById('stats-btn');
  const shinyBtn = document.getElementById('shiny-btn');

  // 绑定Stats按钮的点击事件
  statsBtn.addEventListener('click', function() {
    // 禁用Shiny按钮
    shinyBtn.disabled = true;

    // 如果需要切换禁用/启用状态，用下面这句替换上面的代码
    // shinyBtn.disabled = !shinyBtn.disabled;
  });
});

jQuery

如果你的项目使用jQuery，代码会更简洁：

$(document).ready(function() {
  $('#stats-btn').on('click', function() {
    // 禁用Shiny按钮
    $('#shiny-btn').prop('disabled', true);

    // 切换状态写法：
    // $('#shiny-btn').prop('disabled', function(i, val) { return !val; });
  });
});

Vue.js（Vue 3）

在Vue框架中，通过响应式变量控制按钮的禁用状态：

<template>
  <button @click="toggleShinyDisabled">Stats</button>
  <button :disabled="isShinyDisabled">Shiny</button>
</template>

<script setup>
import { ref } from 'vue';

// 响应式变量控制Shiny按钮的禁用状态
const isShinyDisabled = ref(false);

// 点击Stats按钮时修改状态
const toggleShinyDisabled = () => {
  isShinyDisabled.value = true;
  // 切换状态写法：isShinyDisabled.value = !isShinyDisabled.value;
};
</script>