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: 2px5px; margin: 5px0;}
ulli {padding: 5px;}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><ul><li><label><inputtype="radio"name="one" /> Item 1</label></li><li><label><inputtype="radio"name="one" /> Item 2</label></li><li><label><inputtype="radio"name="one" /> Item 3</label></li><li><label><inputtype="radio"name="one" /> Item 4</label></li></ul><inputtype="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;}
ulli {padding: 5px;}
input[type=button] {padding: 2px5px; margin: 5px0;}
.hidden {display: none;}

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

Solution 2:

Give the button a class:

<buttonclass="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();
    }
  );
});

<divclass="btn-group-vertical"data-toggle="buttons"><labelclass="btn btn-default"><inputtype="radio"name="options"id="option1"name="1"class="a" /><spanclass="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><labelclass="btn btn-default"><inputtype="radio"name="options"id="option2"name="1"class="b" /><spanclass="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><labelclass="btn btn-default"><inputtype="radio"name="options"id="option3"name="1"class="c" /><spanclass="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><labelclass="btn btn-default"><inputtype="radio"name="options"id="option4"name="1"class="d" /><spanclass="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 /><divalign="left"><buttonid="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/