jquery disable按钮（启用、禁用按钮）

封面图 • 2025-05-16 • jQuery

在 jQuery 中，可以通过 `prop()` 方法来启用或禁用按钮。`prop()` 方法可以用来设置 HTML 元素的属性。

### 启用按钮
要启用一个按钮，可以将 `disabled` 属性设置为 `false` 或直接移除 `disabled` 属性。

```javascript
// 启用按钮
$("button").prop("disabled", false);
```

### 禁用按钮
要禁用一个按钮，可以将 `disabled` 属性设置为 `true`。

```javascript
// 禁用按钮
$("button").prop("disabled", true);
```

### 示例代码
以下是一个完整的示例，展示如何通过点击按钮来启用或禁用另一个按钮：

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Enable/Disable Button</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        button {
            margin: 10px;
            padding: 10px;
        }
    </style>
</head>
<body>

// 点击目标按钮时，禁用目标按钮
            $("#targetButton").click(function() {
                $(this).prop("disabled", true);
            });
        });
    </script>

</body>
</html>
```

### 解释
1. **HTML 部分**：
   - 有两个按钮：一个是“启用按钮”，另一个是“目标按钮”。
   - “目标按钮”初始状态下被禁用 (`disabled`)。

2. **jQuery 部分**：
   - 当点击“启用按钮”时，使用 `prop("disabled", false)` 将“目标按钮”启用。
   - 当点击“目标按钮”时，使用 `prop("disabled", true)` 将其禁用。

### 注意事项
- `prop()` 方法用于设置属性值，而 `attr()` 方法用于获取或设置属性的原始值。对于布尔属性（如 `disabled`），推荐使用 `prop()`。
- 如果需要支持较旧的浏览器，确保引入了适当的 jQuery 版本。

这样你就可以轻松地启用和禁用按钮了！