首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在单击另一个切换按钮时禁用Bootstrap切换按钮?

在Bootstrap中,可以通过添加disabled类来禁用切换按钮。当单击另一个切换按钮时,可以使用JavaScript来切换按钮的状态。

以下是实现的步骤:

  1. 在HTML中,为切换按钮添加一个唯一的ID,以便能够通过JavaScript选择它。例如:
代码语言:txt
复制
<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>
  1. 在JavaScript中,使用事件监听器来捕获按钮的点击事件。当点击另一个切换按钮时,禁用之前的按钮并启用当前点击的按钮。例如:
代码语言:txt
复制
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");
});
  1. 在CSS中,定义禁用按钮的样式。例如:
代码语言:txt
复制
.disabled {
  pointer-events: none;
  opacity: 0.6;
}

这样,当点击一个切换按钮时,另一个切换按钮将被禁用,并且具有禁用样式。

关于Bootstrap的切换按钮和禁用按钮的更多信息,可以参考腾讯云的相关产品文档:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券