How can I disable SQLFORM.factory() form button after clicking once?

[mostwanted]

I'm using SQLFORM.factory() to capture a specific detail but i want it to be submitted once, to avoid the mistaking of possibly submitting it again I want the button to be disabled immediately after the first submission. I tried this below but it's not working, how can i make it work??

CONTROLLER

def invoice():
    ref=SQLFORM.factory(Field('Quotation_reference',label=SPAN('Quotation Reference', _style="font-weight: bold;"), widget = lambda field, value: SQLFORM.widgets.string.widget(field, value, _class='my-string', _id='quote_number', _placeholder='N:B; Always remember to enter & submit the quotation number first & always enter it once!')))
   
    qtnBtn=ref.element('input',_type='submit')

    if request.vars.Quotation_reference is None:
        ref2=''
    else:
        session.ref2=request.vars.Quotation_reference
   
    return locals()

VIEW

{{extend 'layout.html'}}
<script>
    $(document).ready(function(){
        $('{{=qtnBtn}}').click(function(){
            $('{{=qtnBtn}}').attr('disbled', true);
        });
    });
</script>

{{=ref}}

Regards;

Mostwanted

[Mark]

'disbled' should be 'disabled'. If it doesn't work, I think you can try to use hide(), or prop('disabled', true)

[mostwanted]

Hey @Mark, thanks for replying but none of the solutions are working! I fixed disabled & replaced attr() with prop() & ultimately with hide() but nothing seems to be working!

[Mark]

Change the '{{=qtnBtn}}' into 'input', it should work. I guess the reference is wrong (not dynamic).