как отключить кнопку с указанным c идентификатором в для l oop с jquery

Question

Я пытаюсь отключить кнопку с указанным c идентификатором, но она не работает

$('.likes-button').click(function(){
    var el= this;
    var button1 = $(el).attr('id');
    console.log(button1)
    $('#button1').attr("disabled",true);
});

<div class="col-4">
    {% csrf_token%}
    <a> <button class=" btn btn-warning btn-dark likes-button "  data-id="{{ product.id}}" id="button1-{{ forloop.counter }}"   > <span class="oi oi-thumb-up"></span> <strong class="string">{{product.stringlike}}</strong> <strong class="target" >{{product.votes_total_like}}</strong> </button></a>
    <a> <button class=" btn btn-warning btn-dark dislike-button"  data-id="{{ product.id}}" id="button2-{{ forloop.counter }}"   ><span class="oi oi-thumb-down"></span> <strong class="distring">{{product.stringdislike}}</strong> <strong class="distarget" >{{product.votes_total_dislike}}</strong></button></a>
</div>

в console.log отображается идентификатор нажатой кнопки = button1-1

Answer 1

Пожалуйста, напишите $('#'+button1).attr("disabled",true); вместо $('#button1').attr("disabled",true);

Answer 2

вы можете сделать это таким образом

 $('.likes-button').click(function(){
            var button1 = "#"+ $(this).attr('id');
            $($button1).prop('disabled',true).css('opacity',0.5);
 });

Answer 3

Идентификатор в кнопке не совпадает

id="button1-{{ forloop.counter }}" 

Вы можете попробовать $('[id^="button1"]').attr("disabled", true); в вашем jquery селекторе, но ваша функция не имеет особого смысла. Если у вас уже есть уникальный класс в кнопке лайков, вы можете просто сделать

$('.likes-button').click(function() {
  $(this).prop("disabled", true);
});

или просто

$('.likes-button').click(function(e) {
  $(e.target).prop("disabled", true);
});

Без jQuery

document.querySelector(".likes-button").addEventListener("click", function(e) {
  e.target.setAttribute("disabled", true);
});

Answer 4

$('.likes-button').click( ()=> {
    $(this).attr("disabled",true);
});