Блог

Главная - Вопросы по программированию - Отключение одной кнопки

Отключение одной кнопки

#javascript #html #jquery

#javascript #HTML #jquery

Вопрос:

У меня возникла проблема с отключением одной кнопки

Когда я нажимаю, чтобы заказать за 10 долларов, он отключает все кнопки, и я хочу, чтобы была отключена только та, которую я нажал

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

Ответ №1:

Используйте $(this) , который является фактическим щелкаемым элементом, к которому обращается селектор

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

Я бы также делегировал, чтобы вы могли добавить больше кнопок позже

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