Question

我需要jQuery的帮助！

我想要做的是，默认情况下不会显示“继续执行步骤2”按钮。但是，当仅选择其中一个时间段时，按钮将显示在所选时间旁边

任何人都可以帮助我实现这一目标吗？提前谢谢！

Answer 1

如果您需要这些元素作为单选按钮，那么解决方案可以如下所示。

HTML ：

<ul>
    <li id="time1">08:00am - 09:00am <input type="radio" name="time"></li>
    <li id="time2">09:00am - 10:00am <input type="radio" name="time"></li>
    <li id="time3">10:00am - 11:00am <input type="radio" name="time"></li>
</ul>
<input type="submit" value="Continue to Step 2" style="display: none;">

的JavaScript ：

$(":radio").on("change", function() {
    $(this).after($(":submit").show());
});

DEMO： http://jsfiddle.net/MxrqS/24/

Answer 2

在您的情况下，首选使用单选按钮，但如果您想继续使用复选框，则以下内容将起作用：

http://jsfiddle.net/lucuma/MxrqS/29/

<ul>
    <li id="time1">08:00am - 09:00am <input type="checkbox"> <input type="submit" value="Continue to Step 2" style="display:none" /></li>
<li id="time2">09:00am - 10:00am <input type="checkbox" name="ch1"></li>
<li id="time3">10:00am - 11:00am <input type="checkbox" name="ch2" ></li>
</ul>

JS：

$('input[type=checkbox]').change(function() {
    if ($(this).is(':checked')) {
       $('input[type=checkbox]').not(this).removeAttr('checked');
       $('input[type=submit]').appendTo($(this).parent()).show();
    } else {
         $('input[type=submit]').hide();
    }        
});

jQuery：显示所选复选框旁边的提交按钮

2 个答案: