Javascript 分别在一些尝试后禁用单选按钮和更改表单

css

javascript

嘿，我有这个密码。当你点击第一个单选按钮时，你第一次看到一些东西。您可以单击“下一步”。否则，您将看到一些错误消息。三次错误尝试后，表单输入将被禁用。在下一节中，您将看到另一个单选按钮。但这并不奏效。我以为我在答案数组中找到了答案，但我不明白为什么没有任何提示？

以下是一些提示：

下一步按钮处理程序应在进入下一阶段后禁用按钮； 检查单选按钮值，以匹配answers数组中特定阶段的任何值； 在开始时显示第一阶段；

---

谢谢你的回答实际上我猜收音机的值与数组答案的值匹配[1,4,2]第一个问题的答案是第二个问题的第一个单选按钮是第三个问题的第四个按钮是第二个单选按钮。你能解释清楚第一阶段的开始吗。我的英语不太好。如果你能提供一些解决方案。我会很高兴的。

<div class="question" id="question_0">
    <label>
        Something:
        <input type="radio" name="radyo" value="1" />
        <input type="radio" name="radyo" value="2" />
        <input type="radio" name="radyo" value="3" />
        <input type="radio" name="radyo" value="4" />
        <input type="radio" name="radyo" value="5" />
    </label>
</div>
<div class="question" id="question_1">
    <label>
        FFFF:
        <input type="radio" name="radyo" value="1" />
        <input type="radio" name="radyo" value="2" />
        <input type="radio" name="radyo" value="3" />
        <input type="radio" name="radyo" value="4" />
        <input type="radio" name="radyo" value="5" />
    </label>
</div>
<div class="question" id="question_2">
    <label>
        asdf:
        <input type="radio" name="radyo" value="6" />
        <input type="radio" name="radyo" value="2" />
        <input type="radio" name="radyo" value="3" />
        <input type="radio" name="radyo" value="4" />

    </label>
</div>
<button id="next" disabled="disabled">Next</button>

.question { display: none; }
#question_0 { display: block; } 

$(document).ready(function() {

    /*
     * question: What question the user is currently on
     * trys: The amount of tries for the CURRENT question
     * answers: The answers for each questions. Matches with radio button values
     */
    var question = trys = 0,
        answers = [1, 6, 2];




    // When the user tries to click the next button (only applies when not disabled)
    $('#next').click(function() {

        // If the next question exists, transition to it
        if ($('#question_' + ++question).length) {
            $('#next').attr('disabled', 'disabled');
            $('#question_' + (question - 1)).fadeOut('fast', function()
                { $('#question_' + ++question).fadeIn('fast'); });
            trys = 0;

        // Else submit the form
        } else alert('submit form');  //$('form').submit(); ???
    });  




    // When the user clicks on a radio button (tries to answer a question)
    $('input[type="radio"]').click(function() {

        // If the answer does not equal what the user clicked on
        if ($(this).val() != answers[question]) {
            $('#next').attr('disabled', 'disabled');  //Disable the button
            ++trys;
            if (trys >= 3) {  //If the user tried 3 times, they fucked up
                $('#question_' + question + ' input').attr('disabled', 'disabled');
                alert('you fucked up');
            } else alert('wrong');  //If the user still has more tries tell them they're wrong

        // Else enable the ability to go to the next question
        } else $('#next').removeAttr('disabled');
    });

});