Question

I have an input on a form where I am displaying an amount owed. Basically if the amount owed is zero, I add a special class called “paid” and I can $(“.paid”) using jquery. All of this is working well.

The question is, how do I prevent users form clicking or entering text or doing anything else with these inputs ?

This is my finction so far.

function disablepaid(){
    $(".paid").on("click", function(){
        alert("Do disabling stuff now");
    });
}

In some other posts I saw people trying jquery blur(), and seting the disabled attribute as seen here How do i grey out the input field and the submit button

Please advise, thanks.

Answer 1

you can set the disabled attribute on the input..

something like:

    function disablepaid(){
        $(".paid").on("click", function(){
            alert("Do disabling stuff now");
            $(this).prop('disabled', true);
        });
    }

If at any time you need to renable it then:

    $(".paid").prop('disabled', false);

Update

Also, rather than allowing the user to click on the paid input field and THEN disabling it, why not disable it when you set the zero amount?