無法在jquery中重新啓用禁用的屬性

Question

我正在學習javascript（jquery），並且我編寫了一個簡單的測驗。我已經走了很長的一段路，如果它的功能應該是最好的，但是，我發現很難實施一個「缺陷」的檢查器，只有當人們回答最後一個問題時才允許下一個問題。

整個測驗是plunker：$("<button>Next</button>").addClass("next").prop('disabled', true).insertAfter("form");

相關jQuery代碼：

var blaat = function() { 
     var isChecked = $('input[name=group1]:checked').length; 
     if (isChecked) { 
      $(".form").find(".next").prop('disabled', false); 
      var answer = $('input[name=group1]:checked', '#form').next().text(); 
      checkAnswer(answer); 
     } 
    }; 

它永遠不會觸發此行http://plnkr.co/edit/qIqa2mHtIOwZNGS2hSBd

我用這條線在questionmaker功能禁用按鈕：$(".form").find(".next").prop('disabled', false); 因爲當我把這一行在色彩控制檯它完美的作品。我錯過了什麼？

Answer 1

這裏的問題是，你沒有附加一個處理程序到改變radio選項的事件，所以無論何時用戶選擇一個答案，什麼都沒有發生。

你只需要到該位添加到您的代碼：

$(".form input").on("change", blaat);

我也做了一些改變，並最終代碼（建議）應該是這樣的：

$(function() { 
    var allQuestions; 

    allQuestions = [{ 
     question: "Who is Prime Minister of the United Kingdom?", 
     choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"], 
     correctAnswer: 0 
    }, { 
     question: "Name the king who failed to keep an eye on things at the battle of Hastings ?", 
     choices: ["David Cameron", "Harold", "Winston Churchill", "Tony Blair"], 
     correctAnswer: 1 
    }, { 
     question: "In which sport would you use a chucker ?", 
     choices: ["Ice hockey", "Billiards", "Polo", "Curling"], 
     correctAnswer: 2 
    }, { 
     question: "If a snail climbed up a 12 ft wall at a steady rate of 3 feet a day, but slipped down 2ft every night, how many days would it take him to reach the top ?", 
     choices: ["10 days", "9 days", "8 days", "12 days"], 
     correctAnswer: 0 
    }, { 
     question: "Traditionally, what type of wood do Rolls Royce use on the dashboards of their cars?", 
     choices: ["Shit", "Gordon Brown", "Winston Churchill", "Walnut"], 
     correctAnswer: 3 
    }, { 
     question: "What is the national emblem of Canada ?", 
     choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Maple leaf"], 
     correctAnswer: 3 
    }, { 
     question: "Free Willey was a film about what ?", 
     choices: ["David Cameron", "Whale", "Winston Churchill", "Tony Blair"], 
     correctAnswer: 1 
    }, { 
     question: "What World War II operation was code named `Dynamo` ?", 
     choices: ["David Cameron", "Gordon Brown", "Evacuation of Dunkirk", "Tony Blair"], 
     correctAnswer: 2 
    }, { 
     question: "How many old pennies were there in a Groat?", 
     choices: ["One", "Two", "Three", "Four"], 
     correctAnswer: 3 
    }, { 
     question: "In cricket, where would you find the chain ?", 
     choices: ["Between the wickets", "Gordon Brown", "Winston Churchill", "Tony Blair"], 
     correctAnswer: 0 
    }]; 

    var correctAnswers = 0; 
    var currentQuestion = 0; 
    var answer = allQuestions[currentQuestion].choices[allQuestions[currentQuestion].correctAnswer]; 

    function init() { 
     var question = allQuestions[currentQuestion].question; 
     var $questions = $(".form input"); 

     $questions.each(function (index) { 
      var choices = allQuestions[currentQuestion].choices[index]; 
      $(this).next().text(choices); 
     }); 

     $("<h2></h2>").text(question).insertBefore("form"); 
     $("<button>Next</button>").addClass("next").prop("disabled",true).on('click', addView).insertAfter("form"); 
    } 

    function addView() { 
     var $input = $("#form").children(); // $('#form input') 

     currentQuestion++; 

     $("h2, button").remove(); 
     $input.prop('checked', false); 

     var question = allQuestions[currentQuestion].question;  
     var $questions = $(".form input"); 

     $questions.each(function (index) { 
      var choices = allQuestions[currentQuestion].choices[index]; 
      $(this).next().text(choices); 
     }); 

     $("<h2></h2>").text(question).insertBefore("form"); 
     $("<button>Next</button>").addClass("next").prop("disabled", true).on('click', addQuestion).insertAfter("form"); 
    } 

    function addQuestion() { 
     if (currentQuestion < 10) { 
      addView(); 
     } 
     else { 
      $(".next").on("click", function() { // need to write this function <-- 
       console.log("it worked!"); 
      }); 
     } 
    } 

    function blaat() { 
     var isChecked = $('input[name=group1]:checked').length; 

     if (isChecked) { 
      $(".form").find(".next").prop("disabled", false); 
      var answer = $('input[name=group1]:checked', '#form').next().text(); 
      checkAnswer(answer); 
     } 
    } 

    function checkAnswer(answer) {  
     var correctAnswer = allQuestions[currentQuestion].correctAnswer; 
     var indexAnswer = allQuestions[currentQuestion].choices[correctAnswer]; 

     if (indexAnswer == answer) { 
      correctAnswers++; 
      console.log(correctAnswers); 
      $(".record").text("You have answered " + correctAnswers + " questions correctly!"); 
      return answer; 
     } 
     else { 
      console.log("answer is not correct!"); 
     } 
    } 

    $("#start").on("click", function() { 
     $(".start").css("display", "none"); 
     $(".quiz").find(".form").removeClass("hidden"); 

     init(); 
    }); 

    $(".form input").on("change", blaat); 
}); 

Demo

Answer 2

我看到您的代碼嘗試添加 $（「input [type ='radio']」）。on（「click」，blaat）; 在初始化函數