虽然单击三个按钮中的一个按钮无法禁用其他两个jQuery

基础概念

在jQuery中，当你点击一个按钮时，如果没有正确地阻止事件冒泡或者没有正确地设置按钮的状态，可能会导致其他按钮也被触发。事件冒泡是指事件从最深的节点开始，然后逐级向上传播到最外层的节点。

类型

这个问题涉及到的是事件处理和状态管理。

应用场景

在多按钮交互的界面中，例如选项卡切换、工具栏按钮等。

问题原因

当点击一个按钮时，事件可能会冒泡到父元素或其他兄弟元素，导致其他按钮的事件也被触发。此外，如果没有正确地设置按钮的禁用状态，即使逻辑上禁用了按钮，用户仍然可以点击。

解决方法

阻止事件冒泡：在事件处理函数中使用event.stopPropagation()来阻止事件冒泡。
设置按钮状态：在点击按钮后，使用.prop('disabled', true)来禁用按钮。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Disable Buttons Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button id="btn1">Button 1</button>
    <button id="btn2">Button 2</button>
    <button id="btn3">Button 3</button>

    <script>
        $(document).ready(function() {
            $('button').click(function(event) {
                // 阻止事件冒泡
                event.stopPropagation();

                // 禁用当前点击的按钮
                $(this).prop('disabled', true);

                // 启用其他按钮
                $('button').not(this).prop('disabled', false);
            });
        });
    </script>
</body>
</html>