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.

Solution 1:

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

In a simple way, you can do this using jQuery:

Disable / Enable

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

Hide / Show

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

Solution 2:

Give the button a class:

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

Hide the button using JS (that way it is still visible for people with JS switched off) or CSS:

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

Attach an event listener to the radio buttons to alter the button's display property when they are clicked:

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

Demo

Solution 3:

Here is your desired solution:

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

FIDDLE

Solution 4:

try something like this 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>

Solution 5:

I just removed some of unnecessary attributes (like ids, second names and classes) from your radio buttons, add to the Next button class, which makes it invisible in default and using simple jQuery action I'm trying to find the first change of value in radio buttons.

The jQuery code should look like this:

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

This is triggered every time someone hits any of the radio buttons. And when it happens jQuery removes class "hidden" which makes it visible.

Class hidden should look like this:

.hidden { display: none; } 

That's all that you need.

Take a look at this: http://jsfiddle.net/dvgxga2j/6/