Conditional Field Display

by Town

HTML

<div id="q1" class="question" data-answer-threshold="10">
    <div>Q1. Is the answer greater than 10?</div>
    <input class="inputbox" />
</div>
<div id="q2" class="question" data-answer-threshold="20">
    <div>Q2. Yes, so here's the next question - is this answer greater than 20?</div>
    <input class="inputbox" />
</div>
<div id="q3" class="question" data-answer-threshold="30">
    <div>Q3. Yes, so here's the next question - at this point, Q1 is considered 'confirmed'. Is this greater than 30?</div>
    <input class="inputbox" />
</div>
<div id="q4" class="question">
    <div>Q4. Yes, so here's the final question - at this point, Q1 and Q2 are considered 'confirmed'.</div>
    <input class="inputbox" />
</div>

CSS

.question { display: none; margin-bottom: 20px;}
#q1 {display: block;}

JavaScript

$(function() {
    $('.inputbox').keyup(function() {
        if ($(this).val() > $(this).closest(".question").data("answer-threshold")) {
            // value matches - show the next question
            $(this).closest(".question").next(".question").show();
            
            // disable the previous-but-one question
            $(this).closest(".question").prev(".question").find("input").prop("disabled", true);
        }
        else  {
            // value doesn't match - hide the next question
            $(this).closest(".question").next(".question").hide();
            // re-enable the previous-but-one question
            $(this).closest(".question").prev(".question").find("input").prop("disabled", false);
        }
    });
});