Jquery 在单击输入按钮后显示下一个按钮

注意：您在不同的元素上重复使用相同的ID（option2和option3），这是错误的。

通过简单的方式，您可以使用jQuery执行此操作：

禁用/启用

$(document).ready(function () {
    $("label input").click(function () {
        $(".next").prop("disabled", false);
    });
});

* {font-family: 'Segoe UI', Tahoma; margin: 0; padding: 0; list-style: none;}
input {vertical-align: middle;}
input[type=button] {padding: 2px 5px; margin: 5px 0;}
ul li {padding: 5px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
  <li><label><input type="radio" name="one" /> Item 1</label></li>
  <li><label><input type="radio" name="one" /> Item 2</label></li>
  <li><label><input type="radio" name="one" /> Item 3</label></li>
  <li><label><input type="radio" name="one" /> Item 4</label></li>
</ul>
<input type="button" class="next" value="Next" disabled="disabled" />

隐藏/显示

$(document).ready(function () {
    $("label input").click(function () {
        $(".next").removeClass("hidden");
    });
});

* {font-family: 'Segoe UI', Tahoma; margin: 0; padding: 0; list-style: none;}
input {vertical-align: middle;}
ul li {padding: 5px;}
input[type=button] {padding: 2px 5px; margin: 5px 0;}
.hidden {display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
  <li><label><input type="radio" name="one" /> Item 1</label></li>
  <li><label><input type="radio" name="one" /> Item 2</label></li>
  <li><label><input type="radio" name="one" /> Item 3</label></li>
  <li><label><input type="radio" name="one" /> Item 4</label></li>
</ul>
<input type="button" class="next hidden" value="Next" />

给按钮一个类：

<button class="btn btn2 btn-default myButton" name="next">Next</button>

隐藏按钮（这样对于关闭 JS 的人来说仍然可见）或 CSS：

$(".myButton").hide();

将事件侦听器附加到单选按钮，以便在单击按钮时更改按钮的显示属性：

$("input:radio").on("click", function(){
  $(".myButton").show();
});

演示

这是您想要的解决方案：

$('[name="next"]').addClass('disabled');
$('[name="options"]').on('change',function(e){
    e.preventDefault();
    $('[name="next"]').toggleClass('disabled', !$('[name="options"]:checked').length);
})

小提琴

尝试像这样的东西

$(function() {
  $('#nextbtn').hide();
  $('input:radio').change(
    function() {
      $('#nextbtn').show();
    }
  );
});

<div class="btn-group-vertical" data-toggle="buttons">
  <label class="btn btn-default">
    <input type="radio" name="options" id="option1" name="1" class="a" /> <span class="label num" style="font-size:18px; margin-bottom:15px; border-radius:0px;">A</span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</label>
  <label class="btn btn-default">
    <input type="radio" name="options" id="option2" name="1" class="b" /> <span class="label num" style="font-size:18px;margin-bottom:15px;border-radius:0px;">B</span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</label>
  <label class="btn btn-default">
    <input type="radio" name="options" id="option3" name="1" class="c" /> <span class="label num" style="font-size:18px;margin-bottom:15px;border-radius:0px;">C</span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</label>
  <label class="btn btn-default">
    <input type="radio" name="options" id="option4" name="1" class="d" /> <span class="label num" style="font-size:18px;margin-bottom:15px;border-radius:0px;">D</span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</label>
</div>
<br />
<br />
<div align="left">
  <button id="nextbtn" class="btn btn2 btn-default" name="next" style>Next</button>
</div>

我刚刚从您的单选按钮中删除了一些不必要的属性（如 id、第二个名称和类），添加到 Next 按钮类中，这使得它在默认情况下不可见，并使用简单的 jQuery 操作我试图找到单选按钮中值的第一个变化。

jQuery 代码应如下所示：

$(function(){
    $("input[type=radio]").change(function() {
        $("#next_button").removeClass("hidden");
    });
});

每次有人点击任何单选按钮时都会触发此命令。当它发生时，jQuery会删除"隐藏"类，使其可见。

隐藏的类应如下所示：

.hidden { display: none; } 

这就是您所需要的。

看看这个： http://jsfiddle.net/dvgxga2j/6/