Javascript guruları gelin 'disable elements'

Javascript ile resmin eşini bulma oyunu yapıyorum ama elementleri click olayı için disable konusunda başarısız oldum. Nasıl yazarsam yazayım eşi bulunan resimler disable olmuyor. Ayrıca bir div nesnesine tıklandığında, o divin rotate animasyonu süresi boyunca tüm diğer divlerin disable olması lazım. Container büyüklüğünde bir divin animasyon süresi boyunca z-indexini 9999 yapsam olur mu bilmiyorum henüz denemedim. Nasıl yapabilirim? Kodlar aşağıda.

<script type="text/javascript">

    //Find Pair Game

    var x = 0; // for first element's inner HTML to check pair.

    var y = 0; // for second element's inner HTML to check pair.

    var n = 0; // for first element's ID

    var m = 0; // for second element's ID

    var numbers = document.querySelectorAll('.number'); // all 'number' class elements

    var numb = document.getElementById('event-con'); // Event container

    // Start Button

    document.getElementById('start').onclick = function () {

        // array for random inner HTML

        var inhtml = [9, 5, 1, 12, 7, 3, 9, 6, 1, 12, 4, 8, 11, 2, 10, 3, 4, 7, 8, 2, 11, 5, 6, 10];

        var ran; // for random number

        var sayi; // for a number from "inhtml"

        // to give random numbers to inner HTML for all elements

        for (i = 24; i > 0; i--) {

            ran = Math.floor(Math.random() * i);

            sayi = inhtml[ran];

            numb.children[i].innerHTML = sayi;

            inhtml.splice(ran, 1); // number deleted from inhtml

            console.log(`i = ${i} ran = ${ran}`);

        }

    }

    // to get ID of elements

    numbers.forEach(function (item) {

        item.addEventListener('click', function (e) {

            if (n == 0) {

                n = e.target.id;

            } else {

                m = e.target.id;

            }

        });

    });

    numbers.forEach(function (item) {

        item.onclick = function () {

            item.style.animation = "rotate 2s forwards";

            item.style.backgroundImage = `url(img/${item.innerHTML}.jpg)`;

            // to check pair

            if (x == 0) {

                x = item.innerHTML;

            } else if ((x > 0) && (y == 0)) {

                y = item.innerHTML;

                if (x != y) { // if they are not pair turn back again

                    document.getElementById(n).style.animation = "rotate2 6s forwards";

                    document.getElementById(m).style.animation = "rotate3 6s forwards";

                    n = 0;

                    m = 0;

                    x = 0;

                    y = 0;

                } else if(x == y){ // if they are pair, disable them to click (failed)

                    document.getElementById(n).disabled = true;

                    document.getElementById(m).disabled = true;

                    n = 0;

                    m = 0;

                    x = 0;

                    y = 0;

                }

            }

            console.log(`x = ${x} y = ${y}       n = ${n} m = ${m}`);

        }

    });

</script>

@SUBJECT 101

disabled özelliği sadece form ögelerinde çalışır (input, select, button gibi). Diğer html elementlerinde disabled çalışmayacaktır. Onun yerine css'deki pointer-events'ı kullanabilirsin.

Teşekkürler hocam deneyeceğim.

Şöyle yapabilirsin. disabled değilde o item'a bir özellik eklersin örneğin data-match="1" gibi. Tıklandan item'da bu özellik varsa tıklama fonksiyonunun içerisini çalıştırmazsın.