jQuery在单击输入按钮后显示下一个按钮 [英] Jquery to display next button once a input button is clicked

问题描述

我试图在用户单击输入后显示下一个按钮"，所以他们只有在做出选择后才获得下一个按钮，我正在为此项目使用引导程序.

I am trying to show the 'next button' once the user clicks on the inputs, so they only get the next button after they have made a selection, I am using bootstrap for this project.

提琴是我到目前为止所拥有的.

Fiddle is of what I have so far.

任何帮助表示赞赏

http://jsfiddle.net/RS41/dvgxga2j/1/

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

更新..

您好，按钮的重点是移到下一个屏幕，我已经实现了上面的代码，但是当我进入下一个屏幕时，下一个按钮已经出现，我会认为此解决方案适用于所有人屏幕.我的提琴是 http://jsfiddle.net/RS41/dvgxga2j/9/

Hi, the whole point of the button is to move onto the next screen, I have implemented the above code, but when I go to the next screen the next button already appears, I would have thought this solution would be for all the screens. my fiddle is http://jsfiddle.net/RS41/dvgxga2j/9/

推荐答案

注意:您要在不同的元素上重复使用相同的ID(option2和option3)，这是错误的.

Note: You are repeating the use of same ID (option2 and option3) on different elements, which is wrong.

您可以使用jQuery简单地做到这一点:

In a simple way, you can do this using 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" />

这篇关于jQuery在单击输入按钮后显示下一个按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！