Question

我正在尝试显示“下一步”按钮＆＃39;一旦用户点击输入，所以他们只有在做出选择后才能获得下一个按钮，我正在为这个项目使用bootstrap。

小提琴是我迄今为止所拥有的。

任何帮助表示赞赏

<div class="btn-group-vertical" data-toggle="buttons">
  <label class="btn btn-default">
    <input type="radio" name="options" id="option2" 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="option3" 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 class="btn btn2 btn-default" name="next">Next</button>
</div>

UPDATE ..

嗨，按钮的整个点是移动到下一个屏幕，我已经实现了上面的代码，但是当我进入下一个屏幕时，下一个按钮已经出现，我会认为这个解决方案适合所有人屏幕。我的小提琴是http://jsfiddle.net/RS41/dvgxga2j/9/

Answer 1

注意：您正在重复对不同元素使用相同的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" />

Answer 2

给按钮一个类：

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

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

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

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

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

Demo

Answer 3

尝试这样的事情FIDDLE：

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

Answer 4

这是您理想的解决方案：

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

FIDDLE

Answer 5

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

jQuery代码应如下所示：

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

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

隐藏的类应该如下所示：

.hidden { display: none; }

这就是你所需要的一切。

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

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

5 个答案:

禁用/启用

隐藏/显示