Javascript 灰显html的某些部分，直到选中单选按钮

我有一个奇怪的要求，我以前从未有过，我不知道如何去做

基本上我有一个在线申请表，每个问题都包含在自己的div中，首先我希望显示第一个div，其余的问题都是“灰色”的，然后当有人单击第一个问题的单选按钮时，第二个问题就会自动取消标记，依此类推

到目前为止，我的HTML代码如下，我想知道是否有人能帮我解决这个问题

<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>

1.这是第一个问题？
诺伊斯
2.这是第二个问题？
诺伊斯
3.这是第三个问题？
诺伊斯

使用Jquery以及显示/隐藏或添加和删除禁用属性的组合

显示/隐藏：

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

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

禁用/启用：

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

单击事件：

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

对div的不透明度：

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

---

这应该给你一个如何进行的想法。希望有帮助

您可以在开始时使用此选项禁用所有单选按钮

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

然后，每次选中单选按钮时，都会执行此操作

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

或者这也可以，稍微短一点

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

---

也可以使用不透明度创建“灰显”效果

---

灰显或禁用？我想灰显整行。。。比如在顶部添加不透明这只会禁用字段不是吗？太好了。。。谢谢你的回复。。。。我从来不知道不透明命令。。。太完美了：）太完美了。。。我对没有冲突的事情有意见，但都解决了。。。非常感谢，只有一件事。。。单击第一个单选按钮之一后，第二行似乎没有变灰。

$(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", "");
});