Form'un her change eventi için bir ajax çağırıyorum. Ajaxtan dönen verinin durumuna göre Form'daki "SUBMIT" butonunu ya .hide() ile gizliyorum, ya da .show() ile gösteriyorum.

Ancak bazen şöyle bir senaryo gerçekleşiyor; Örneğin checkbox'a hızlı hızlı basıldığında, selectbox'taki verileri hızlı hızlı değiştirildiğinde kod parçası sapıtıyor.

Örneğin: kullanıcı olması gereken "A durumu" şeklinde formu doldurduktan ve Submit.show() olduktan hemen sonra; Hatalı olan "B durumu" şeklinde formu değiştirdiği zaman buton hala .Show() olarak kalmış oluyor...

Örnek kodları şu şekilde gösterebilirim:

$("#form").on('change', function (e) {
$("#btnSubmit").hide();
if (mevcutDurum > hedeflenenDurum) {
    $("#bilgi").text("Hedeflenen durum, mevcut durumdan alçak olamaz!");
    $("#bilgilendirme").show();
    $("#btnSubmit").hide();
    }
}
else {
    let form = $(this);
    $.ajax({
        type: "POST",
        url: url,
        data: form.serialize(),
        beforeSend: function () {
            $("#btnSubmit").hide();
        },
        success: function (data) {
            $("#btnSubmit").show();
        },
    });
}

Özetle: Form kurallara uygunsa Submit.show(), hatalıysa Bilgilendirme yazısı gösterilip Submit.hide() olmalıyken;
Hem uyarı görünüyor, hem de buton Submit olarak kalmış oluyor...

Görseli inceleyiniz:

Nasıl çözebilirim bunu?