Disabling single button

user_14250508 0
Viewed 37

I am having a problem of disabling single button

When I click to order for $10 it disables all buttons, and I only want the one which I have clicked to be disabled

$(document).ready(function() {
  $('.btn-checkout').click(function(e) {
    $('.btn-checkout').html('proccesing order');
    $('.btn-checkout').attr("disabled", true);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form method="POST">
  <button type='button' class='btn-checkout'> order for $10</button>
  <button type='button' class='btn-checkout'> order for $20</button>
  <button type='button' class='btn-checkout'> order for $30</button>
</form>

html jquery javascript
1 Answers

Use $(this) which is the actual clicked item accessed by the selector

$(function() {
  $('.btn-checkout').on('click',function(e) {
    $(this).html('proccesing order');
    $(this).attr("disabled", true);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form method="POST">
  <button type='button' class='btn-checkout'> order for $10</button>
  <button type='button' class='btn-checkout'> order for $20</button>
  <button type='button' class='btn-checkout'> order for $30</button>
</form>

I would also delegate so you could add more buttons later

$(function() {
  $('#container').on('click','.btn-checkout',function(e) {
    $(this).html('proccesing order');
    $(this).attr("disabled", true);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form method="POST">
<div id="container">
  <button type='button' class='btn-checkout'> order for $10</button>
  <button type='button' class='btn-checkout'> order for $20</button>
  <button type='button' class='btn-checkout'> order for $30</button>
</div>  
</form>

user_2957830
Related