Vuejs复选框如果选中则禁用答案

【问题标题】：Vuejs checkbox disable if checkedVuejs复选框如果选中则禁用
【发布时间】：2022-01-19 14:40:14
【问题描述】：

我有 4 个复选框输入，如果选中，我想禁用每个输入！

如果用户选中 2 个复选框，则禁用所有输入，我通过 v-model length >= 4 实现这一点

<div class="form-check">
     <label class="form-check-label">
     <input type="checkbox" value="1" v-model="inputs" disabled="inputs.length >= 4">
        text1
     </label>
</div>
<div class="form-check">
     <label class="form-check-label">
     <input type="checkbox" value="2" v-model="inputs" disabled="inputs.length >= 4">
        text1
     </label>
</div>
<div class="form-check">
     <label class="form-check-label">
     <input type="checkbox" value="3" v-model="inputs" disabled="inputs.length >= 4">
        text1
     </label>
</div>
<div class="form-check">
     <label class="form-check-label">
     <input type="checkbox" value="4" v-model="inputs" disabled="inputs.length >= 4">
        text1
     </label>
</div>

如何禁用用户选中的输入复选框？

【问题讨论】：

您没有提供太多信息，但我相信您想将v-bind 用于disabled 属性：<input v-bind:disabled="inputs.length >= 4"> 或只是:disabled="inputs.length >= 4"
我使用禁用所有输入，我将尝试实现的是禁用检查输入
:disabled="inputs.length >= 4 || inputs.includes('your hardcoded value')" 其中hardcoded value 是您在value 属性中提供的数字

标签： vue.js checkbox

【解决方案1】：

感谢您发布问题。我认为input标签的disabled属性应该是:disabled。

<input type="checkbox" value="1" v-model="inputs" :disabled="inputs.length >= 4" />

希望你有最好的结果。

谢谢。

【讨论】：