verhindern, dass die Taste gedrückt wird, bis das Optionsfeld ausgewählt wurde

Question

Ich habe eine Schaltfläche, die auf jeder Folie in einem Quizspiel erstellt wird. Optionsfelder, die die Antwortmöglichkeiten enthalten, werden während des Durchlaufens der Fragen von einem Objekt an jede Folie angehängt. Ich möchte, dass ein Optionsfeld angeklickt werden muss, bevor Sie auf die Schaltfläche nextQuestion zugreifen können. Sie finden das .append() in Zeile 5 des folgenden Codes (innerhalb der loadQuestion-Funktion). Welche Methode wäre der beste Weg, um das gewünschte Ergebnis zu erzielen? Wenn Sie mehr Code benötigen, lassen Sie es mich wissen.

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

Ich hoffe, das hilft!

Sicherheitshinweis: Jeder kann das deaktivierte Attribut aus dem Schaltflächen-Tag entfernen, indem Entwickler-Tools im Browser verwendet werden. Verwenden Sie das Backend, um den Wert des Kontrollkästchens zu validieren.

Answer 2

Es gibt mehr als einen Weg, um dies zu realisieren:

„drücken Prevent-Taste, bis Radio ausgewählt wird“

Aus ui/ux Perspektive Ihre Anfrage die folgende Frage aufwirft: " Wenn der Benutzer nicht auf die Schaltfläche klicken soll, bis das Radio ausgewählt ist, warum kann dann die Taste gedrückt werden, bevor das Radio ausgewählt wird? " Also, fangen wir an.

//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 ...*/ 
})); 

Oder Sie nextButton nach einer Antwort erzeugen könnten, ist viel in der gleichen Art und Weise ausgewählt, die Sie gerade auf das Optionsfeld erzeugen - nur delegieren Ereignis Bindung verwenden erinnern. Dies ist wahrscheinlich der "bessere Weg", da, wie bereits von @zadd gezeigt wurde, die disabled Eigenschaft umgangen werden kann.

Ohne das Rad neu zu erfinden, können Sie auch prüfen, ob beim Drücken der Taste ein Radio ausgewählt ist.

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

});