Как отключить кнопку после достижения условия в laravel

Question

Я использую laravel и застрял в состоянии. я добавляю счетчик и условие, что когда счетчик равен 4, отключить кнопку и больше не добавлять элемент. это мой код

var increment = 0;
$(document).ready(function(){
    $(".compare").click(function(){
        increment++;
        document.getElementById('compare').innerHTML = "";
        document.getElementById('compare').innerHTML = "Compare (" +increment+")";
                if(increment == 4)
                {
                    var array =  document.getElementsByClassName('compare');
                    for (var i = 0 ; i < array.length ; i++)
                    {
                        array[i].setAttribute('disabled','');
                    }
                }

я хочу отключить кнопку после достижения предела, и больше не нужно добавлять никуда предмет, если счетчик равен 4.

Answer 1

Не совсем Laravel связано, но вам не нужно jQuery только для добавления счетчика. Ваниль JS выполняет свою работу:

<button id="btn" onclick="buttonCheck()">Click me</button>

<script>
    var counter = 0;

    function buttonCheck(){
        counter++;

        if (counter >= 4)
            document.getElementById("btn").setAttribute("disabled", "disabled");
    }
</script>

Answer 2

Видя, что у вас уже есть jQuery в вашем коде. Я приведу пример, используя jQuery.

var increment = 0;
$(document).ready(function(){
    $(".compare").click(function(){
        increment++;
        document.getElementById('compare').innerHTML = "";
        document.getElementById('compare').innerHTML = "Compare (" +increment+")";

        if(increment == 4)
        {
             $(".compare").prop("disabled", true); 
             //prop() is used to set attribute value of an html element
        }
    }
}

В большинстве случаев это будет работать. Но в некоторых случаях этого не произойдет, вы можете манипулировать этим с помощью CSS.

var increment = 0;
$(document).ready(function(){
    $(".compare").click(function(){
        increment++;
        document.getElementById('compare').innerHTML = "";
        document.getElementById('compare').innerHTML = "Compare (" +increment+")";

        if(increment == 4)
        {
             $(".compare").css("pointer-events", "none");
        }
    }
}

Answer 3

var increment = 0;
$(document).ready(function() {
  $(".compare").click(function() {
    increment++;
    document.getElementById('compare').innerHTML = "";
    document.getElementById('compare').innerHTML = "Compare (" + increment + ")";
    if (increment == 4) {
      var array = document.getElementsByClassName('compare');
      for (var i = 0; i < array.length; i++) {
        array[i].setAttribute('disabled', '');
      }
    }
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="compare" id="compare">INCREMENT</button>