CODEWITHSUNDEEP
javascriptjquerytwitter-bootstraptwitter-bootstrap-3
user3649067
user3649067

Reputation: 237

Issue on Toggling Two Classes on Bootstrap 3 Radio Button Group

I am trying to Toggle two classes .btn-primary and .btn-default ONLY on parent of the checked Radio on Bootsrap 3 radio Buttons at This Demo. But as you can see from the example it only works at first check radio and incase of checking another radio the previous button loses both classes

$(function () {
    $('input:radio[name="opts"]').change(function () {
        $(this).parent().toggleClass("btn-primary btn-default");
    });
});

can you please let me know why this is happening and how I can fix it? Thanks

Upvotes: 0

Views: 96

Answers (1)

RemusT
RemusT

Reputation: 166

This should do the trick - 

$(function () {
    $('input:radio[name="opts"]').change(function () {
        $('.btn').removeClass('btn-default');
        $('.btn').addClass('btn-primary');        
        $(this).parent().removeClass('btn-primary');
        $(this).parent().addClass('btn-default');
    });
});

Here is your fiddle: http://jsfiddle.net/cMALS/1/

Upvotes: 2

Related Questions