Question

我有一个奇怪的请求，我以前没有，我不知道如何去做。

基本上我有一个在线申请表，每个问题都包含在自己的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>

Answer 1

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

这应该让你知道如何解决这个问题。希望它有所帮助

Answer 2

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

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

Answer 3

您还可以使用不透明度来创建“灰显”效果。

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

在检查单选按钮之前，请忽略html的某些部分

3 个答案: