jquery - jQuery：選択したチェックボックスの横に送信ボタンを表示する

Question

jQueryのサポートが必要です！

これがマークアップですhttp://jsfiddle.net/MxrqS/16/

私がやりたいのは、デフォルトでは「ステップ2に進む」ボタンは表示されないということです。ただし、タイムスロットの1つが選択されている場合にのみ、選択された時間の横にボタンが表示されます

誰でも私がこれを達成するのを手伝ってくれる？前もって感謝します！

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());
});​

デモ：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();
    }        
});​