首页 > 解决方案 > 有没有办法从 Vue.js 的列表中只检查一个复选框

问题描述

我需要帮助。我正在做一个测验,我有一个带有复选框的答案列表。但我需要设置该用户只能从列表中选择 1 个复选框,如果他想在一个答案中从列表中选择第二个,它会提醒他他不能这样做。我已经尝试将输入类型更改为收音机,但效果不佳。有什么解决办法吗?

HTML:

<label v-for="answer in question.answers" class="answer" :class="{ 'answer-correct':answer.correct, 'answer-false':answer.false }">
                <input type="checkbox" data- :value="answer.id" v-model="answer.selected"> {{ answer.answer }}
            </label>

JS 提交测验:

this.questions.forEach(question => 
        {
            question.answers.forEach(answer => 
            {
                answer.correct = question.correct.includes(answer.id);
                answer.false = question.false.includes(answer.id);

                if (((answer.correct = question.correct.includes(answer.id)) && (answer.selected == true)))
                {
                    this.points++;
                }
            });
        });

JS 一个问题:

var questions = 
[
{
    question: "Kolik je 34+21?",
    answers: 
    [ 
        { id: 0, answer: "68", correct: false }, 
        { id: 1, answer: "53", correct: false }, 
        { id: 2, answer: "55", correct: false } 
    ],
    correct: [2],
    selected: [],
    false: [0, 1],
    answercorrect: [],
    answerfalse: [],
    answerfalse2: []
},

标签: javascripthtmlvue.js

解决方案


推荐阅读