How to disable button after reaching condition in laravel

Question

I am using laravel and stuck in a condition. i add counter and a condition that when counter equals to 4 disable the button and no more item added. this is my code

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','');
                    }
                }

i want's to disable button after reaching the limit and no more item added from anywhere if the counter equals to 4.

Answer 1

 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>

Answer 2

Not really Laravel related, but you don't need jQuery just to add a counter. Vanilla JS gets the job done:

<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 3

Seeing that you already have jQuery in your code. I'll give an example using 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
        }
    }
}

Most of the time, this would work. But in some cases that it won't, you could manipulate this with 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");
        }
    }
}