如何实现未勾选复选框时禁用vueform/slider组件？

你的核心问题是没搞对复选框数组和滑块禁用状态的绑定逻辑——因为checkedFilter是个数组，直接绑到disabled上肯定不对，得针对每个滑块单独判断对应的复选框值是否在选中数组里。

修改后的模板代码 #

给每个Range组件加上:disabled属性，判断逻辑为当对应的值不在选中数组里时禁用：

<div class="flex justify-between mb-16 items-center">
  <input
    type="checkbox"
    id="wood"
    value="wood"
    v-model="checkedFilter"
    @change="onCheckbox($event)"
  />
  <label for="wood" class="ml-1 text-white">Wood</label>
  <Range
    v-model="wood"
    :min="0"
    :max="200"
    class="ml-20 w-[300%]"
    @change="woodSliderChanged"
    :disabled="!checkedFilter.includes('wood')"
  />
</div>
<div class="flex justify-between mb-16 items-center">
  <input
    type="checkbox"
    id="food"
    value="food"
    v-model="checkedFilter"
    @change="onCheckbox($event)"
  />
  <label for="food" class="ml-1 text-white">Food</label>
  <Range
    v-model="food"
    :min="0"
    :max="200"
    class="ml-20 w-[300%]"
    @change="foodSliderChanged"
    :disabled="!checkedFilter.includes('food')"
  />
</div>
<div class="flex justify-between mb-16 items-center">
  <input
    type="checkbox"
    id="gold"
    value="gold"
    v-model="checkedFilter"
    @change="onCheckbox($event)"
  />
  <label for="gold" class="ml-1 text-white">Gold</label>
  <Range
    v-model="gold"
    :min="0"
    :max="200"
    class="ml-20 w-[300%]"
    @change="goldSliderChanged"
    :disabled="!checkedFilter.includes('gold')"
  />
</div>

逻辑说明 #

• 每个滑块的disabled属性对应判断：!checkedFilter.includes('对应值')——意思是如果当前复选框的值没被选中（不在数组里），就禁用滑块。
• 这样每个滑块的禁用状态都是独立的，不会互相影响，完全符合需求：未勾选时禁用对应滑块，勾选后启用。

额外优化建议 #

如果后续要添加更多同类选项，可以把数据放到数组里循环渲染，避免重复代码：

<template>
  <div v-for="item in filterItems" :key="item.value" class="flex justify-between mb-16 items-center">
    <input
      type="checkbox"
      :id="item.value"
      :value="item.value"
      v-model="checkedFilter"
      @change="onCheckbox($event)"
    />
    <label :for="item.value" class="ml-1 text-white">{{ item.label }}</label>
    <Range
      v-model="this[item.value]"
      :min="0"
      :max="200"
      class="ml-20 w-[300%]"
      @change="this[`${item.value}SliderChanged`]"
      :disabled="!checkedFilter.includes(item.value)"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkedFilter: [],
      wood: 0,
      food: 0,
      gold: 0,
      filterItems: [
        { value: 'wood', label: 'Wood' },
        { value: 'food', label: 'Food' },
        { value: 'gold', label: 'Gold' }
      ]
    }
  },
  // ... 原有方法
}
</script>

内容的提问来源于stack exchange，提问作者Sponge Coder