How to make sure pressed button remain "pressed down"

Question

I am using BootStrap Group Button class and found that in my own code, if a button is pressed down, the button will pop up back in a few seconds....

How can I make sure it remain pressed-down status?

<div class="row">
<div class="col-md-12">
    <div class="form-group">
        <label>Stage of business:</label>
        <br />
        <div class="btn-group">
            <button class="btn btn-default"><span class="glyphicon">Start-up</span>
            </button>
            <button class="btn btn-default"><span class="glyphicon">Growth Company</span>
            </button>
            <button class="btn btn-default"><span class="glyphicon">Mature Company</span>
            </button>
        </div>
    </div>
</div>

Thank you.

---

Update

I added the active css and I found that when I clicked the button the whole page gets refreshed so that's why the button loses active css class. How to disable the submit action on these 3 button only? Coz I do have a button which is also in this form and it needs to trigger a submit action.

$('.btn-stage').click(function () {
            $(this).toggleClass("active"); //addCss("active");
        })

---

Update 3

Also, in this button group, only one button can be selected, if other button is selected, then the rest of buttons should bounce back.

Thank you.

Answer 1

Adding an active class to the button should keep it's 'pressed in' style.

$('.btn').click(function(e) {
    e.preventDefault();
    $(this).addClass('active');
})

Hope that helps.

Answer 2

Demo

js

$('.Button').click(function() {
    $(this).toggleClass("active");
});

css

.Button:active, .active {
    background-color:red;
    color: white;
}

html

<button class='Button'>Button</button>

---

Final Demo

js

$('.Button').click(function(e) {
    $('.Button').not(this).removeClass('active');    
    $(this).toggleClass('active');
    e.preventDefault();
});

html

<button class='Button'>Button</button>
<button class='Button'>Button</button>
<button class='Button'>Button</button>

css

.Button:active, .active {
    background-color:red;
    color: white;
}

Answer 3

add a class to define them lets say "nosubmit" like this :

    <button class="btn btn-default nosubmit"><span class="glyphicon">Start-up</span>
    </button>
    <button class="btn btn-default nosubmit"><span class="glyphicon">Growth Company</span>
    </button>
    <button class="btn btn-default nosubmit"><span class="glyphicon">Mature Company</span>
    </button>

then do this :

    $('.nosubmit').click(function() {
        $(this).addClass("active");
        $('.nosubmit').unbind( "click" );// this will take off the click handler from all the nosubmit buttons
// if you want it to be to changed back whene you click again use toggleClass instead
         return false;
    });

Answer 4

Where did you put the buttons? Is it in form? I have no problem add/changing button's class into active if the buttons are not within the form tag. you can use:

$(document).ready(function(){
        $('.btn-stage').click(function () {
            $('.btn-stage.active').removeClass("active");
            $(this).addClass("active");
        })
    });

but if it is in the form tag, you need to add type='button' to your button elements. so it looks like this

<form>
    <div class="row">
        <div class="col-md-12">
                <div class="form-group">
                    <label>Stage of business:</label>
                    <br />
                    <div class="btn-group">
                        <button class="btn btn-default btn-stage" type='button'><span class="glyphicon">Start-up</span>
                        </button>
                        <button class="btn btn-default btn-stage" type='button'><span class="glyphicon">Growth Company</span>
                        </button>
                        <button class="btn btn-default btn-stage" type='button'><span class="glyphicon">Mature Company</span>
                        </button>
                    </div>
                </div>
        </div>
    </div>
</form>

And the javascript above is still working. When you had a button within a form and you don't specify the type of its button, it will automatically set as type='submit'