disable input field totally

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.

why dont you show this by ajax ...like if condition match only than show the fild since i can disable js — NullPoiиteя, Nov 15 '12 at 14:49
@NullPointer - surely if you disable the js then the ajax call wouldn't work either..?... — Darren Wainwright, Nov 15 '12 at 14:52

Darren Wainwright · Accepted Answer · 2012-11-15T14:58:08.923

2

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?

edited Nov 15 '12 at 14:58

answered Nov 15 '12 at 14:49

Darren Wainwright

28,457
19
68
116

Thanks man, I preferred this as I am using the newest jquery version – Faiyet Nov 15 '12 at 15:11
@Binaryrespawn, you're welcome. Once you get to grips with the library you'll be amazed at what you can do with little code :) – Darren Wainwright Nov 15 '12 at 15:12

score 1 · Answer 2 · answered Nov 15 '12 at 14:49

1

Just use prop() and set the disabled property to true

$(".paid").on("click", function(){
        $(this).prop('disabled', true);

        // or  
        this.disabled = true; 
});

answered Nov 15 '12 at 14:49

Gabe

46,932
26
137
178

1

Or just `this.disabled = true;` – Pointy Nov 15 '12 at 14:50
@Pointy - yea i just added that – Gabe Nov 15 '12 at 14:51

score 0 · Answer 3 · answered Nov 15 '12 at 14:49

0

You can disable your input

$(".paid").attr("disabled", "disabled");

answered Nov 15 '12 at 14:49

fxbt

2,236
14
17

Better to just use `this.disabled = true;` in the "click" handler. Using `.attr()` like that has been sort-of wrong since jQuery 1.6. – Pointy Nov 15 '12 at 14:49

disable input field totally

3 Answers3