Bootstrap 按钮激活与禁用
Bootstrap 中按钮状态的控制方法
问题
使用 Bootstrap 激活或禁用按钮要如何操作？
解答
激活按钮
使用 .active 类让按钮呈现按下状态：
<!-- 普通按钮 -->
<button type="button" class="btn btn-primary">普通</button>
<!-- 激活状态按钮 -->
<button type="button" class="btn btn-primary active">激活</button>禁用按钮
1. <button> 元素 - 使用 disabled 属性
<!-- 使用 disabled 属性 -->
<button type="button" class="btn btn-primary" disabled>禁用按钮</button>
<!-- 也可以写成 disabled="disabled" -->
<button type="button" class="btn btn-secondary" disabled="disabled">禁用按钮</button>2. <a> 元素 - 使用 .disabled 类
<!-- a 标签不支持 disabled 属性，需要用 .disabled 类 -->
<a href="#" class="btn btn-primary disabled" aria-disabled="true">禁用链接</a>
<!-- 完全阻止点击，添加 tabindex="-1" -->
<a href="#" class="btn btn-primary disabled" tabindex="-1" aria-disabled="true">禁用链接</a>JavaScript 动态控制
<button id="myBtn" type="button" class="btn btn-primary">按钮</button>
<script>
const btn = document.getElementById('myBtn');
// 禁用按钮
btn.disabled = true;
// 或
btn.setAttribute('disabled', 'disabled');
// 启用按钮
btn.disabled = false;
// 或
btn.removeAttribute('disabled');
// 切换激活状态
btn.classList.toggle('active');
</script>jQuery 方式
// 禁用
$('#myBtn').prop('disabled', true);
// 或
$('#myBtn').attr('disabled', 'disabled');
// 启用
$('#myBtn').prop('disabled', false);
// 或
$('#myBtn').removeAttr('disabled');
// 激活
$('#myBtn').addClass('active');
// 取消激活
$('#myBtn').removeClass('active');完整示例
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="zxwuk">
<h5>按钮状态演示</h5>
<!-- 不同状态的按钮 -->
<button class="btn btn-primary">普通</button>
<button class="btn btn-primary active">激活</button>
<button class="btn btn-primary" disabled>禁用</button>
<hr>
<!-- 动态控制 -->
<button id="targetBtn" class="btn btn-success">目标按钮</button>
<button class="btn btn-outline-secondary" onclick="toggleDisabled()">切换禁用</button>
<button class="btn btn-outline-secondary" onclick="toggleActive()">切换激活</button>
<script>
const targetBtn = document.getElementById('targetBtn');
function toggleDisabled() {
targetBtn.disabled = !targetBtn.disabled;
}
function toggleActive() {
targetBtn.classList.toggle('active');
}
</script>
</body>
</html>关键点
<button>使用disabled属性禁用，<a>使用.disabled类.active类用于显示按钮的激活/按下状态<a>标签禁用时需添加aria-disabled="true"保证可访问性- JavaScript 中用
disabled属性或classList动态控制状态 .disabled类只改变样式，不阻止<a>标签的默认行为，需配合 JS 处理
目录