Greying out certain parts of html until a radio button is checked

I have a weird request i havent had before and im not sure how to go about it.

Basically i have an online application form, each question is contained in its own div, at first i want the first div shown and the rest of the questions to be 'greyed' out, then when someone clicks a radio button for the first question, the second question then ungreys itself and so on.

The code for the HTML i have so far is below, i was wondering if someone could help me out with this.

<div class="line">
    <label><span>1.</span>This is a first question?</label>
    <div class="right-box small">
        <input type="radio" name="" value=""><label style="padding-left: 3px; padding-right: 24px;">No</label><input type="radio" name="" value=""><label style="padding-left: 3px;">Yes</label>
    </div>
</div>
<div class="line">
    <label><span>2.</span>This is a second question?</label>
    <div class="right-box small">
        <input type="radio" name="" value=""><label style="padding-left: 3px; padding-right: 24px;">No</label><input type="radio" name="" value=""><label style="padding-left: 3px;">Yes</label>
    </div>
</div>

<div class="line">
    <label><span>3.</span>This is a third question?</label>
    <div class="right-box small">
        <input type="radio" name="" value=""><label style="padding-left: 3px; padding-right: 24px;">No</label><input type="radio" name="" value=""><label style="padding-left: 3px;">Yes<开发者_如何学编程;/label>
    </div>
</div>

---

Use Jquery and a combination of show / hide or adding and removing disabled attributes.

Show / hide:

$('.line').show(); // would show all
$('.line').hide(); // would hide all

$('#yourId').show(); // would show one element
$('#yourId').hide(); // would hide one element

Disabled / enabled:

$('#yourId').attr('disabled',true); // would disable
$('#yourId')..removeAttr('disabled'); // would enable

Click event:

$('#yourId').click(function() {
  // Do action for the clicked input show next element, enabled etc
});

Opacity to a div:

$("#yourId").css({ opacity: 0.5 });

This should give you an idea of how to go about this. Hope it helps

---

You can also use opacity to create a "greying out" effect.

$(document).ready(function() {
    //grey out all lines.
    $(".line").css({opacity:'0.2'});
    $(".line input").attr("disabled", "disabled");

    //add input change handlers
    $(".line input").change(function() {
        //enable the next line
        $(this).parents(".line").next(".line").css({opacity:'1'});
        $(this).parents(".line").next(".line").find("input").attr("disabled", "");
    });

    //enable the first line
    $(".line:first").css({opacity:'1'});
    $(".line:first input").attr("disabled", "");
});

---

You could use this at the start to disable all radio buttons

$('.line').find('input').attr('disabled','true');

Then this for each time a radio button is checked

$('.line').find('input').click(function(){
   $(this).parents('.line').siblings('.line:next').find('input').removeAttr('disabled');
});

Or this may also work, slightly shorter

$('.line input').click(function(){
   $(this).parents('.line').next('.line input').removeAttr('disabled');
});