jQuery Disable Button function on second click

Question

I'm trying to prevent users from clicking the button on the page twice, so what I've been doing is hiding that button with jQuery after it's been clicked once. But is there a way instead of hiding that button to disable with jQuery that button after it was clicked once?

I've tried

$(document).ready(function () {
    $('#onClickHideButton').click(function () {
        $(this).prop('disabled', true);
    });
});

but the problem that I'm having with this function is that as soon as the button is clicked it it becomes disabled before it get the chance to submit the form, so the form never gets submitted.

Answer 1

Why not disable the button when the form is submitted, since that's what you actually want to do...

$('#myForm').on('submit', function () {
    $('#myButton').prop('disabled', true);
});

Answer 2

Instead of using a submit button, just use a simple button and send manually the form submit.

<input type="button" id="onClickHideButton" value="Submit"/>

$('#onClickHideButton').click(function () {
     $(this).prop('disabled', true);
     $('#myform').submit();
});

or you could disable the button when the form is submitted

$('#myform').on('submit', function(e) { 
    $('#onClickHideButton').prop('disabled',true);
});