修改Bootstrap Switch禁用状态样式及关联文本加粗逻辑

1. 修复Bootstrap Switch禁用状态的样式 #

你现有CSS的选择器不符合Bootstrap 5开关组件的样式逻辑，Bootstrap 5的开关样式直接作用于input元素本身，而非label伪元素。需要针对禁用状态的两种场景（未选中/已选中）分别覆盖默认样式：

/* 启用状态基础样式 */
.form-check.form-switch .form-check-input {
  box-shadow: none; 
  cursor: pointer; 
  height: 20px; 
  width: 40px; 
  background-color: #5382FB; 
}

/* 禁用状态 - 未选中时 */
.form-check.form-switch .form-check-input:disabled {
  background-color: #5382FB;
  border-color: #5382FB;
  opacity: 1; /* 移除默认半透明效果 */
  cursor: not-allowed; /* 禁用时显示禁止鼠标样式 */
}

/* 禁用状态 - 已选中时 */
.form-check.form-switch .form-check-input:disabled:checked {
  background-color: #5382FB;
  border-color: #5382FB;
  opacity: 1;
}

2. 根据开关状态切换文本加粗 #

通过JavaScript监听开关的change事件，同时在页面加载时初始化样式，根据开关的checked属性判断状态并调整文本加粗：

// 获取DOM元素
const toggleSwitch = document.getElementById('flexSwitchCheckDefault');
const monthlyEl = document.querySelector('.monthly');
const annuallyEl = document.querySelector('.annually');

// 定义更新文本加粗状态的函数
function toggleTextWeight() {
  if (toggleSwitch.checked) {
    annuallyEl.style.fontWeight = 'bold';
    monthlyEl.style.fontWeight = 'normal';
  } else {
    monthlyEl.style.fontWeight = 'bold';
    annuallyEl.style.fontWeight = 'normal';
  }
}

// 页面加载时初始化样式
toggleTextWeight();

// 监听开关切换事件
toggleSwitch.addEventListener('change', toggleTextWeight);

完整代码示例 #

整合后的HTML、CSS、JavaScript代码：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>

<style>
.form-check.form-switch .form-check-input {
  box-shadow: none; 
  cursor: pointer; 
  height: 20px; 
  width: 40px; 
  background-color: #5382FB; 
}

.form-check.form-switch .form-check-input:disabled {
  background-color: #5382FB;
  border-color: #5382FB;
  opacity: 1;
  cursor: not-allowed;
}

.form-check.form-switch .form-check-input:disabled:checked {
  background-color: #5382FB;
  border-color: #5382FB;
  opacity: 1;
}
</style>

<div class="d-flex justify-content-center align-items-center">
    <div class="monthly me-3">Monthly</div>
    <div class="form-check form-switch">
        <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
    </div>
    <div class="annually ms-3">Annually</div>
</div>

<script>
const toggleSwitch = document.getElementById('flexSwitchCheckDefault');
const monthlyEl = document.querySelector('.monthly');
const annuallyEl = document.querySelector('.annually');

function toggleTextWeight() {
  if (toggleSwitch.checked) {
    annuallyEl.style.fontWeight = 'bold';
    monthlyEl.style.fontWeight = 'normal';
  } else {
    monthlyEl.style.fontWeight = 'bold';
    annuallyEl.style.fontWeight = 'normal';
  }
}

toggleTextWeight();
toggleSwitch.addEventListener('change', toggleTextWeight);
</script>

内容的提问来源于stack exchange，提问作者Miguel Gisbert