Question

我在测验游戏中的每张幻灯片上创建了一个按钮。当您循环搜索问题时，包含答案选项的单选按钮会从对象附加到每张幻灯片上。我想要在访问nextQuestion按钮之前单击一个单选按钮。您可以在下面代码的第5行找到.append（）（在loadQuestion函数内部）。什么方法是达到预期结果的最佳方法？如果您需要更多代码，请告诉我。

var loadQuestion = function (){
        $('.question-name').html(name + (qnum) +"/"+ total);
        $('.question').html(questions[count].question);
        for(var i=0; i<questions[count].options.length; i++) {
            $('.inputs').append('<input type="radio" name="question" value="'+questions[count].options[i]+'">'+questions[count].options[i]+'<br>')
        }
    };

    /*--- First Question ---*/
    var name = "Question ";
    var qnum = 1;
    var count = 0;
    var total = questions.length;
    loadQuestion();

    /*--- When the Next Question Button is Hit ---*/
    nextQuestion.click(function() {
        $('.inputs').html("");
        qnum++;
        count++;
        if (qnum <= 4) {
            loadQuestion();
        } else if (qnum == 6) {
            $('.question-name').html("Your Score:");
            $('.question').html("You got X out of 5 questions correct!");
            nextQuestion.html("Home Screen").click(function() {
                location.reload();
            });
        } else if (qnum == 5){
            loadQuestion();
            $('.next-question').html("Get Score!");
        }
    });

Answer 1

$(document).ready(function () {
    $('#nextButton').attr('disabled', true);//disable the button by default on page load
    $("input[type=checkbox]").on("click", function () {
        if (this.length > 0) {
            $('#nextButton').attr('disabled', false);//enable only when the checkbox is checked
        }
    });
});

我希望这有帮助！

安全说明：任何人都可以使用浏览器中的开发人员工具从按钮标记中删除disabled属性。使用后端验证复选框值。

Answer 2

解决这个问题的方法不止一种：

“按下按钮直到选中无线电”

从ui / ux的角度来看，您的请求提出了以下问题：“如果用户不应该单击该按钮，直到选择了收音机，为什么按钮可以在收音机前按下被选中了吗？“所以，让我们从那里开始。

//pseudo-code - use delegate binding '.on()' for dynamically generated elements

$('.inputs').on('click', 'input[name="question"]', function({
  if ($(this).is(':checked')) {
    $('#nextButton').attr('disabled', false);
  } else {
    $('#nextButton').attr('disabled', true);
  } /*... snip ...*/ 
}));

或者，您可以在选择答案后以与当前生成单选按钮相同的方式生成nextButton - 只需记住使用委托事件绑定。这可能是“更好的方式”，因为正如@zadd已经指出的那样，disabled属性可以被规避。

如果不重新发明轮子，您还可以检查按下按钮时是否选择了收音机。

// pseudo-code again
nextQuestion.click(function() {

   if($('input[name="question"]:checked').length > 0){
      // checked!!! go do stuff!!!
   } else {
     // not checked! i should probably throw an alert or something...
     alert('please answer the question before proceeding...');
   }

});

阻止按钮直到选中单选按钮

2 个答案: