Reset Bootstrap button to the normal styles after clicking

user_12507577 0
Viewed 1404

Buttons in Bootstrap would be active after clicking and remain in active status. I applied removeClass(); to remove the 'btn-active' which would be added after clicking. However it does not work for me.

function func(e){
  $(e.currentTarget).removeClass("btn-active");
}
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

  <!-- bootstrap -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="container m-5">
  <input type="button" value="correct" class="btn btn-primary" onclick="func(event)">
</div>

bootstrap-4 html jquery javascript
4 Answers

Instead of:

$(e.currentTarget).removeClass("btn-active");

you can simply trigger the blur event in order to remove the focus effect.

function func(e){
  $(e.currentTarget).trigger("blur");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>


<input type="button" value="correct" class="btn btn-primary" onclick="func(event)">

user_38805850

If you want to toggle the active state of the button, I suggest you grab the target of the event and use an appropriate Boostrap class.

function toggleActive(e) {
  $(e.target).toggleClass('active');
}
body {
  padding: 1em;
}
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<input type="button"
  class="btn btn-primary active"
  onclick="toggleActive(event)"
  value="correct">

user_17622240

You can use the following CSS

.btn:focus {
    outline: none;
    box-shadow: none;
    background: #007bff;
}

This will remove the style after the button click. Check the snippet

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<!-- bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
    integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
    integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
    crossorigin="anonymous"></script>

<style>
    .btn:focus {
        outline: none;
        box-shadow: none;
        background: #007bff;
    }
</style>

<input type="button" value="correct" class="btn btn-primary" />

user_94925130

Check out this snippet:

<html>
<head>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

    <!-- bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
    <div class="container m-5">
        <input type="button" value="correct" class="btn btn-primary" onclick="$(this).blur();">
    </div>
</body>
</html>

You just need to call blur method on this object when user click the button, which removes focus from the button as it get clicked.

user_138281240
Related