Bootstrap 5与Vue.js结合使用时Checkbox无法正常点击的问题

问题原因及解决方案 #

1. 复选框无法点击的核心问题

你没有给复选框绑定勾选状态，仅绑定了点击事件，点击后没有同步更新复选框的checked属性，所以视觉上没有反馈，看起来像点击无效。同时你用纯数字作为id属性值，也可能和label的for属性绑定出现兼容问题。

2. 修正后的代码示例

模板部分：

<ul class="widget-list widget-filter-list list-unstyled pt-1" style="max-height: 11rem;"
    data-simplebar data-simplebar-auto-hide="false">
  <li v-for="(brand, index) in brands" :key="index"
      class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
    <div class="form-check">
      <input 
        v-model="selectedBrands"
        class="form-check-input"
        type="checkbox"
        :value="brand.id"
        :id="`brand-${index}`"
        @change="handleBrands"
      >
      <label class="form-check-label widget-filter-item-text" :for="`brand-${index}`">
        {{ brand.brand }}
      </label>
    </div>
  </li>
</ul>

脚本逻辑部分：

export default {
  data() {
    return {
      // 你的原有品牌列表数据
      brands: [],
      // 新增：存储选中的品牌id的响应式数组
      selectedBrands: []
    }
  },
  methods: {
    handleBrands() {
      // 直接取selectedBrands即可拿到所有选中的品牌id，无需操作DOM
      console.log(this.selectedBrands)
    }
  }
}

3. 原DOM操作失败的原因

你调用document.getElementById('index')是获取id为字符串index的元素，但你实际每个复选框的id是0、1、2这类动态数字，所以永远无法匹配到对应元素。Vue为数据驱动框架，不推荐直接操作DOM获取状态，直接从绑定的响应式数据取值即可。

额外排查项

如果修改后仍无法点击，可检查simplebar插件是否拦截了点击事件，给input标签添加@click.stop修饰符阻止事件冒泡即可。

内容的提问来源于stack exchange，提问作者Andrés Lopez