我有一個帶有“年齡”欄位的表單。有兩種可能的情況：要么我勾選了“未知”框，然后您無法輸入/選擇年齡（換句話說，該選項應禁用）或未選中該框，然后您可以輸入年齡. 但是，我根本無法執行第一個場景。這是我的代碼：
<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 做到這一點嗎？先感謝您！！
uj5u.com熱心網友回復：
這是您的第一個場景。
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>uj5u.com熱心網友回復：
兩者都可以。問題是，在跳轉到任何型別的 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>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/364151.html