How is the correct way to disable an input type="image" using jquery?

Question

With jQuery, I'm trying to disable an input field like this:

<input id="submit" type="image" src="submit.jpg">

What I would like to do is disabling the button and change the image with a different image (submitGreyed.jpg) to visually notify that button is disabled.

With the following line I disable the button:

JQuery("#submit").attr('disabled','true');

then I change the image with:

JQuery("#submit").attr('src','submitGreyed.jpg');

and once disabled I submit the form with:

JQuery("#form").submit();

The second line has some weird behaviour; sometimes works and sometimes doesn't.

When it works, button is disabled, image changed and form is submitted; when it does not work, button is disabled, form is submitted but image is not changed.

How can I solve this?

In what way does it sometimes not work? Do you mean it breaks in some browsers? — Matchu
– Matchu, Commented Feb 6, 2010 at 1:47
yes, it does not work in firefox 3.5.7 and safari too. Once image appears for the first time, then it starts to work. But, when i close and reopen the browser, it does not work again. — systempuntoout
– systempuntoout, Commented Feb 6, 2010 at 1:50
Your quotes are unbalanced between double and single quotes. #form is missing the end quote entirely — user113716
– user113716, Commented Feb 6, 2010 at 1:50
You are right, but it was just a typo.Source code is correct. — systempuntoout
– systempuntoout, Commented Feb 6, 2010 at 1:54
Have you tried not submitting the form at all? If it is something preloading will solve, then it should work every time if you comment out the submitting part to test for a bit. — Blair Scott
– Blair Scott, Commented Feb 6, 2010 at 2:03

Doug Neiner · Accepted Answer · 2010-02-06 02:15:17Z

9

This doesn't answer your question exactly, but I hope it helps:

First, it should be disabled="disabled" so use this:

jQuery("#submit").attr('disabled','disabled');

And I am not sure what your grayed out button looks like, but you could try just using opacity:

jQuery("#submit").attr('disabled','disabled').css('opacity',0.5);

Update I couldn't replicate the problem, so here is my suggestion:

Use an absolute path to the image instead of a relative one, and set both attributes at the same time (Though setting one after the other didn't change my test):

jQuery("#submit").attr({
   disabled: 'disabled',
   src:      '/images/submitGreyed.jpg'
});

Since in my test I used a full path, that might have affect it a bit.

View a demo here

edited Feb 6, 2010 at 2:15

answered Feb 6, 2010 at 2:03

Doug Neiner

66.4k14 gold badges111 silver badges118 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

alex Over a year ago

Disable: true also works via jQuerry. I'm not sure if it's the browser or jQuery that accepts it. Probably the browser seeing the attribute with any value.

Collectives™ on Stack Overflow

How is the correct way to disable an input type="image" using jquery?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related