1

I am trying to change the state of buttons with jquery and bootstrap. They both just stay on the btn default after I click one. 

$("#content-background-disabled-btn").click((e) => {
  $(this).removeClass("btn-default");
  $(this).addClass("btn-success");

  $("#content-background-enabled-btn").removeClass("btn-success");
  $("#content-background-enabled-btn").addClass("btn-default");

  e.preventDefault();
});
$("#content-background-enabled-btn").click((e) => {
  $(this).removeClass("btn-default");
  $(this).addClass("btn-success");

  $("#content-background-disabled-btn").removeClass("btn-success");
  $("#content-background-disabled-btn").addClass("btn-default");

  e.preventDefault();
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>
<button class="btn btn-default" id="content-background-disabled-btn">
content-background-disabled-btn
</button>
</p>

<p>
<button class="btn btn-default" id="content-background-enabled-btn">
content-background-enabled-btn
</button>
</p>
Phil
  • 157,677
  • 23
  • 242
  • 245
Jim Andy
  • 23
  • 2
  • Possible duplicate of [How to access the correct \`this\` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) – Phil Feb 07 '18 at 00:58
  • The issue is due to your use of arrow functions. The `this` in the function refers to the parent `this` binding which is `window`. – Phil Feb 07 '18 at 00:59

2 Answers2

0

You can use the this to add/remove between the states of the classes in the button.

$('#content-background-disabled-btn').click(function() {
    $(this).removeClass('btn-default');
    $(this).addClass('btn-success');
});
Joel García
  • 191
  • 4
  • 10
  • This seems contrary to what OP wants. Clicking on a button should not toggle the state but only set it to `btn-success` – Phil Feb 07 '18 at 00:57
0

Try this, Bro

$("#content-background-disabled-btn").click(function(e) {
e.preventDefault();
  $(this).removeClass("btn-default");
  $(this).addClass("btn-success");

  $("#content-background-enabled-btn").removeClass("btn-success");
  $("#content-background-enabled-btn").addClass("btn-default");

   
});
$("#content-background-enabled-btn").click(function(e) {
  $(this).removeClass("btn-default");
  $(this).addClass("btn-success");

  $("#content-background-disabled-btn").removeClass("btn-success");
  $("#content-background-disabled-btn").addClass("btn-default");
 
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>
<button class="btn btn-default" id="content-background-disabled-btn">
content-background-disabled-btn
</button>
</p>

<p>
<button class="btn btn-default" id="content-background-enabled-btn">
content-background-enabled-btn
</button>
</p>
Alex
  • 50
  • 9