CODEWITHSUNDEEP
phpjqueryhtmltwitter-bootstrap
VDS
VDS

Reputation: 47

Button Toggling with JQuery & Bootstrap - How to change class of inactive after toggled

I am using Bootstrap & Jquery.

How to change class of inactive after toggled

Find my code below:

HTML Code

    <div class="btn-group btn-toggle"> 
    <button class="btn btn-default">Active</button>
    <button class="btn btn-danger active">Inacive</button>

SCRIPT

    $(document).ready(function(){

    $('.btn-toggle').click(function() {
        $(this).find('.btn').toggleClass('active');  


        if ($(this).find('.btn-danger').size()>0) {
            $(this).find('.btn').toggleClass('btn-success');
            $(this).find('.btn').addClass('btn-default');
        }
        else if ($(this).find('.btn-success').size()>0) {
            $(this).find('.btn').toggleClass('btn-danger');

}

addClass() seems not working..

Upvotes: 2

Views: 1514

Answers (1)

Pavithra Olety
Pavithra Olety

Reputation: 88

I understand that you are trying to disable and enable buttons on certain actions. Here is how I got it:

This is the button on my form:

<button type="submit" class="btn btn-primary">Compute</button>

Add this line when you click on the button, in my case I am disabling the button once the form is submitted:

$('button', form).addClass('disabled').text("Computing...");

Enable back once you are done:

$('button', form).removeClass('disabled').text("Compute");

Hope this helps!

Upvotes: 1

Related Questions