如果未单击任何单选按钮，则禁用按钮答案

【问题标题】：Disable button if none of the radio buttons are clicked如果未单击任何单选按钮，则禁用按钮
【发布时间】：2018-07-08 21:43:32
【问题描述】：

我在 Vue 中做了一个测验，它根据问题数组的索引一次显示一个问题。单个问题的示例 html：

<h3>Is this a question?</h3>

<label><input type="radio" name="option" value="option">Yes</label>
<label><input type="radio" name="option" value="option">Maybe</label>
<label><input type="radio" name="option" value="option">No</label>

<button type="button" class="btn btn-default">Next question</button>

我想要实现的是在用户没有点击任何单选按钮时禁用“下一个问题”按钮（对于这个特定的索引问题）。我使用 v-model 让它工作，但是当我单击按钮时，它不适用于弹出的数组中的下一个问题。谁能帮帮我？

【问题讨论】：

你能发布你的v-model演示吗？
@yuriy636 感谢您的回复。老实说，我删除了它，它并不多。只是在单选选项上称为“checked”的 v-model 并在 Next 按钮上声明 :disabled="!checked"。
Using Vee-validate to disable button until form is filled out correctly的可能重复
您是否在单击下一个按钮或选择单选按钮时存储答案？

标签： laravel vue.js

【解决方案1】：

我认为一个不错的选择是将 id 参数传递给按钮元素 (DOM)，并在数组中使用它来将问题标记为已填充/打开并显示/隐藏按钮。

【讨论】：

不完全是我正在寻找的，因为我正在使用 Vue.JS，但感谢您的回复！

【解决方案2】：

来吧，伙计，使用 v-model。

<h3>Is this a question?</h3>

<label><input type="radio" name="option" value="option" v-model="radioValue">Yes</label>
<label><input type="radio" name="option" value="option" >Maybe</label>
<label><input type="radio" name="option" value="option" v-model="radioValue">No</label>

<button type="button" class="btn btn-default" :disabled="!radioValue">Next question</button>

希望对你有帮助。

【讨论】：