So deaktivieren Sie die Schaltfläche "Fertig stellen" nach dem ersten Klick

Question

Ich habe die verschiedenen Methoden ausprobiert, die normalerweise funktionieren, aber SmartWizard scheint zu verhindern, dass diese Methoden funktionieren.

Ich muss die Schaltfläche Fertig stellen deaktivieren und den Text nach dem Klicken ändern, um mehrere Übermittlungen zu verhindern. Egal wo ich den Code platziere, der Bildschirm ändert sich nicht, der Wert der Schaltfläche ändert sich nicht und die Schaltfläche wird nicht deaktiviert.

habe ich versucht, die typische Klick-Funktion ...

$(".actionBar .buttonFinish").click(function(){ 
    $(".actionBar .buttonFinish").addClass("buttonDisabled"); 
    $(".actionBar .buttonFinish").text("Sending..."); 
}); 

Ich habe auch versucht, diese Validierung der letzten Schrittes im Rahmen mit und in den FinishCallback direkt vor dem Ajax-Aufruf. Nichts ändert sich, bis der Ajax-Aufruf abgeschlossen ist und der Ajax-Erfolg ausgeführt wird.

UPDATE

Ok, dann ist dies sicher ein Timing-Problem. Wenn der Ajax-Aufruf fehlschlägt, wird die Schaltfläche deaktiviert und der Text wird geändert. Ich muss sicherstellen, dass diese beiden Dinge auftreten, bevor ich zum Ajax-Aufruf übergehe. Bisher habe ich versucht, diese aber es hat nicht funktioniert:

$(".actionBar .buttonFinish").addClass("buttonDisabled").text("Sending...").ajax({ 

Answer 1

Versuchen Sie, diese

<input type='button' id='btn' onclick='click_me()' value='click'> 

    var disable = false; 
    function click_me() 
    { 
    if(disable = 'false') { 
     $(".actionBar .buttonFinish").addClass("buttonDisabled"); 
     $(".actionBar .buttonFinish").text("Sending..."); 
     disable = true; 
    } 
    } 

Answer 2

$(".actionBar .buttonFinish").click(function(){ 
    $(".actionBar .buttonFinish").attr('disabled', 'disabled'); 
    $(".actionBar .buttonFinish").text("Sending..."); 
}); 

Answer 3

Sie können dies am Ende des ‚Onclick‘ Ereignis fügen Sie die Taste deaktivieren

$(this).prop("disabled", true); 

ODER

$(this).attr("disabled", 'disabled'); 

Sie müssen die Funktion 'prop' oder 'attr' abhängig von der JQuery-Version

Answer 4

verwenden Versuchen Sie dies.

$(document).ready(function(){ 
 
    $(function(){ 
 
    $(".buttonFinish").on("click", function(){ 
 
     $(this).prop('disabled', true); 
 
     $(this).val("Sending..."); 
 
    }); 
 
    }); 
 
});

input{ 
 
    display: block 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 

 
<div> 
 
    <form> 
 
    <input type="text"> 
 
    <input type="text"> 
 
    <input class="buttonFinish" type="submit"> 
 
    </form> 
 
</div>

UPDATE

Lassen Sie mich sehen, ob ich Sie verstanden, Sie auf die Schaltfläche und den Text vor Ajax-Aufruf deaktivieren? Sie haben es mit vorSenden versucht?

$(document).ready(function(){ 
 
    $(function(){ 
 
    $("form").submit(function(e){ 
 
     e.preventDefault(); 
 
     
 
     $.ajax({ 
 
     beforeSend: function(){ 
 
      $(".buttonFinish").prop('disabled', true); 
 
      $(".buttonFinish").val("Sending..."); 
 
     }, 
 
     complete: function(){ 
 
      // remove disabled and change the text 
 
     }, 
 
     }); 
 
    }); 
 
    }); 
 
});

input{ 
 
    display: block 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 

 
<div> 
 
    <form> 
 
    <input type="text"> 
 
    <input type="text"> 
 
    <input class="buttonFinish" type="submit"> 
 
    </form> 
 
</div>

Answer 5

Da Ihr .buttonFinish ist ein Link, nicht wirklich eine Taste, können Sie deaktivieren es nicht mit .prop('disabled', true) - Sie stattdessen eine "Blockierung pane" verwenden möchten.

Setzen Sie ein div am Ende Ihrer Seite, ich bevorzuge kurz vor dem </body> Tag, das nichts enthält und ungesehen ist, von der Seite und ohne Höhe und Breite.

<div id="blocker"></div> 
</body> 

Wenn die „Button“ geklickt wird dann eine Klasse hinzufügen, damit, dass sie zeigen, machen, indem die volle Höhe/Breite der Seite und mit einem hohen Z-Index, so dass es „vor“ ist von alles andere; Es wird alle Klicks erhalten, die nicht an die darunter liegenden Steuerelemente als niedrigerer Z-Index weitergegeben werden.
Ihr Click-Handler würde $('blocker').addClass('blocking'); der resultierende DOM geben ...

<div id="blocker" class="blocking"></div> 
</body> 

Verwenden CSS Stil #blocker so ist es unsichtbar, dann Stil #blocker.blocking so blockiert es den Rest der Seite.

$('a.finished').click(function(e) { 
 
    e.preventDefault(); 
 
    $('#blocker').addClass('blocking'); 
 
    // when ajax call finishes, 
 
    // use $('#blocker').removeClass('blocking'); 
 
});

#blocker { 
 
    position: fixed; 
 
    top: -10px; 
 
    left: -10px; 
 
    height: 0; 
 
    width: 0; 
 
    z-index: -20; 
 
    background-color: white; 
 
} 
 

 
#blocker.blocking { 
 
    height: auto; 
 
    width: auto; 
 
    bottom: -10px; 
 
    right: -10px; 
 
    opacity: 0.6; 
 
    z-index: 9000; 
 
}

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.js"></script> 
 
<div class="stuff"> 
 
    <p>This is stuff</p> 
 
    <p>This is other stuff</p> 
 
    <p>A <a href="#" class="finished">link</a> is in here.</p> 
 
</div> 
 
<div id="blocker"></div>