如何用Vue.js实现勾选未知复选框后禁用年龄输入框功能

该需求完全可以通过Vue.js实现，核心逻辑是通过双向绑定监听复选框状态，动态控制年龄输入框的disabled属性，以下是完整改造方案：

核心逻辑说明 #

• 声明两个响应式变量：age存储用户输入的年龄值，isAgeUnknown存储「Unknow」复选框的勾选状态
• 复选框通过v-model绑定isAgeUnknown，自动同步勾选状态
• 年龄输入框通过v-bind:disabled（可简写为:disabled）绑定isAgeUnknown，勾选状态为true时输入框自动禁用

改造后完整代码 #

<template>
  <div class="row mb-3">
    <label for="age" class="col-sm-2 col-form-label"> Age </label>
    <div class="col-sm-10">
      <input 
        type="number"
        class="col-sm-3 col-form-control" 
        min="0" 
        max="120" 
        step="1" 
        id="age"
        v-model="age"
        :disabled="isAgeUnknown"
      >
    </div>
    <div class="row mb-3">
      <label class="col-sm-1 col-form-check-label"> Unknow </label>
      <input 
        class="form-check-input" 
        type="checkbox" 
        id="check1" 
        name="option1" 
        value="something"
        v-model="isAgeUnknown"
      >
    </div>
  </div>
</template>

<!-- Vue3 语法 -->
<script setup>
import { ref } from 'vue'
const age = ref('')
const isAgeUnknown = ref(false)
</script>

如果使用Vue2版本，只需将script部分替换为Options API写法：

export default {
  data() {
    return {
      age: '',
      isAgeUnknown: false
    }
  }
}

可选优化 #

如果需要勾选「Unknow」时自动清空已输入的年龄，可添加状态监听逻辑：

// Vue3 示例
watch(isAgeUnknown, (newVal) => {
  if (newVal) age.value = ''
})

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