Скрипт срабатывает только один раз на событие click

192

11 июля 2018, 09:30

Этот скрипт срабатывает один раз. При клике кнопка блокируется. CSS свойства применяются. Через 5 сек кнопка автоматически разблокируется. Но при последующих нажатиях скрипт не блокирует кнопку и css свойства не применяются

    function timerBlock() { 
            $(this).prop('disabled', 'false').css('cursor', 'pointer'); 
            console.log('Кнопка разблокирована'); 
        } 
 
    $("#one-form-line").click(function() { 
        $(this).prop('disabled', 'true').css('cursor', 'not-allowed'); 
        console.log('Кнопка заблокирована');             
        setTimeout(timerBlock, 5000); 
    });

Answer 1

На самом деле в интернете полно уже готовых решений, как на jQuery, так и нa чистом JavaScript:

$("#btn").on("click", function(){ 
    var $self = $(this); 
    $self.attr("disabled","disabled"); 
    setTimeout(function(){ 
        $self.removeAttr("disabled"); 
    }, 5000); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<button id="btn">Click me</button>

То же самое на чистом JavaScript:

document.getElementById("btn").addEventListener("click", function(){ 
    document.getElementById("btn").disabled = true; 
    setTimeout(function() { 
        document.getElementById("btn").disabled = false; 
    }, 5000); 
});