HTML/vue.js - 选中时禁用选择列表答案

【问题标题】：HTML/vue.js - disable select list when checkedHTML/vue.js - 选中时禁用选择列表
【发布时间】：2021-11-23 13:17:42
【问题描述】：

我有一个带有“年龄”字段的表单。有两种可能的情况：要么我选中“未知”框，然后您无法输入/选择年龄（换句话说，该选项应禁用），要么未选中该框，然后您可以输入年龄.但是，我根本不能做第一个场景。这是我的代码：

<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">
</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">
</div>
</div>

vue.js 可以做到这一点吗？提前谢谢你！

【问题讨论】：

我认为使用普通的旧 JavaScript 可以做到这一点。

标签： html vue.js

【解决方案1】：

这是你的第一个场景。

const checkBox = document.getElementById('check1')
const input = document.getElementById('age')

checkBox.addEventListener('change', (event) => {
  if (event.currentTarget.checked) {
    input.disabled = true
  } else {
    input.disabled = false
  }
})

<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">
  </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">
  </div>
</div>

【讨论】：

哇非常感谢@Erenn！！

【解决方案2】：

两者都可以。问题是，在跳到任何类型的 JavaScript 框架之前，你应该先了解它在纯 JavaScript 中是如何工作的，希望这有意义

const app = new Vue({
  el: "#app",
  data() {
    return {
      checkedStatus: false,
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="row mb-3" id="app">
  <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" :disabled="checkedStatus">
  </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" @change="checkedStatus=!checkedStatus">
  </div>
</div>

【讨论】：