在Bootstrap中,可以通过添加disabled
类来禁用切换按钮。当单击另一个切换按钮时,可以使用JavaScript来切换按钮的状态。
以下是实现的步骤:
<button id="btn1" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">按钮1</button>
<button id="btn2" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">按钮2</button>
document.getElementById("btn1").addEventListener("click", function() {
document.getElementById("btn2").classList.remove("disabled");
document.getElementById("btn1").classList.add("disabled");
});
document.getElementById("btn2").addEventListener("click", function() {
document.getElementById("btn1").classList.remove("disabled");
document.getElementById("btn2").classList.add("disabled");
});
.disabled {
pointer-events: none;
opacity: 0.6;
}
这样,当点击一个切换按钮时,另一个切换按钮将被禁用,并且具有禁用样式。
关于Bootstrap的切换按钮和禁用按钮的更多信息,可以参考腾讯云的相关产品文档:
领取专属 10元无门槛券
手把手带您无忧上云