Javascript 防止按钮按下，直到选择单选按钮

我有一个按钮，是在问答游戏的每张幻灯片上创建的。当您循环浏览问题时，包含答案选项的单选按钮将从对象附加到每张幻灯片上。我想要求您先单击单选按钮，然后才能访问下一个查询按钮。您可以在下面代码的第5行（loadQuestion函数内部）找到.append（）。达到预期效果的最佳方法是什么？如果您需要更多的代码，请告诉我

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!");
        }
    });

var loadQuestion=函数（）{
$（'.question name'）.html（name+（qnum）+“/”+总计）；
$（'.question'）.html（问题[count].question）；
对于（var i=0；i
我希望这有帮助

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

我希望这有帮助

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

“在选择收音机之前禁止按下按钮”

从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...');
   }

});

有不止一种方法可以做到这一点：

“在选择收音机之前禁止按下按钮”

从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...');
   }

});

一种方法是，在单击功能中，检查是否选中了单选按钮，如果返回false，否则继续执行您现在正在执行的操作，只需检查是否选中了单选按钮。如果（$（'input[name=“question”]：checked'）。长度>0）{//DOSTUFF一种方法是，在您的单击函数中，检查是否选中了单选按钮，如果返回false，否则继续执行您现在正在执行的操作，只需检查是否选中了单选按钮。如果（$（'input[name=“question”]：checked'）。长度>0{//DOSTUFF