How to make sure that the button is pressed remains pressed,

Question

I use the ButtonStrap Group Button class and found that in my own code, if the button is pressed, the button will close after a few seconds ....

How can I make sure it stays pressed?

<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> 

Thanks.

---

Update

I added active css and I found that when I clicked the button, the whole page refreshes, so the button loses the active css class. How to disable the send action only for these buttons 3? Coz I have a button that is also in this form, and it needs to call the submit action.

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

---

Update 3

In addition, in this group of buttons you can select only one button, if another button is selected, the remaining buttons should go back.

Thanks.

Answer 1

Adding an active class to a button should be kept in a clicked style.

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

Hope this 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, 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 the following:

  $('.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 shape? I have no problem adding / changing the class of buttons in the active, if the buttons are not in 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

 <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 above javascript is still working. When you have a button on the form and you don’t specify the type of its button, it will be automatically set as type = 'submit'