delay in form with jquery

I'm making a form that gives you an error to wait 10 seconds to try again.

This is the code I'm using:

HTML:

<form id="login-form" method="post" class="form-signin" role="form" action="/recordarcontrasena">
    <ul>
        <li class="iconousuario"><i class="fa fa-user"></i></li>
        <li><input readonly tabindex="1" name="email" id="email" type="email" class="fontAwesome" placeholder="&#xf0e0 Correo electrónico" autofocus></li>
        <li><button tabindex="2" class="boton" type="submit" id="Enviar" data-loading-text="Iniciando....">Restablecer Contraseña</button></li>
</form>

JS:

spop({
    template: '<?=$error; ?><br/>Espere <strong id="CuentaAtras">10</strong> para volver a intentarlo',
    style: 'error', autoclose: 10000 });

$("#login-form").submit(function() {
    spop({ template: 'Tate quieto.', style: 'notice', autoclose: 1000 });
    return false;
});

var timeleft = 10;
var downloadTimer = setInterval(function(){
    timeleft--;
    document.getElementById("CuentaAtras").textContent = timeleft;
    if (timeleft <= 0) {
        clearInterval(downloadTimer);
        $('#email').delay(11800).prop('readonly', false);
        $("#login-form").submit(function() { return true; });
    }
},1000);

The fact is that with what I have to stop sending the form and show a popup message that says the error that has occurred and that you wait 10 seconds.

At the moment, deactivating the input email and the button to send the form, works perfectly, but at the time of re-activating the sending of the form it does not work and I do not finish understanding the reason.

What can I have wrong?