Make a submit input un-clickable

Question

I have the following input:

<input type="submit" name="next" value="Next">

How would I make this item un-clickable via jQuery? (i.e., it may only be clicked after certain validation criteria are met) ?

Here is a follow-up to this question: Make a submit clickable after validations are met

If it's 'AFTER' certain validation, why not just start with adding `disabled="disabled"` in your markup, and remove it once the validation has run successfully? — ahren, May 24 '12 at 03:02
Duplicate anyway: http://stackoverflow.com/questions/1414365/how-to-disable-an-input-with-jquery — ahren, May 24 '12 at 03:04
I'd suggest you don't disable the submit button at all. Instead, have it display an error message telling the user what they need to do to correct the validation problems (rather than leaving them wondering). — nnnnnn, May 24 '12 at 03:50

Tats_innit · Accepted Answer · 2012-05-24T03:17:30.383

8

2 Demos Demo 1 click here: or Demo 2 click here:

so all you will need is to check if the validation is done correctly of not.

i.e. if (notValid) chuck in the code below and that will disable the button. or better yet start with the disabled next button.

To enable you can set the property as false, I am sure you get a good idea, else provide more code; I am happy to help you further. B-)

Hope this helps!

$("#submit").prop('disabled', true);

OR

$("input[type='submit']").prop('disabled', true);

edited May 24 '12 at 03:17

answered May 24 '12 at 03:04

Tats_innit

33,101
9
67
75

$("#submit") ? is submit an id? – May 24 '12 at 03:10
HIya @vlzvl I did that as extras see second demo as well please, just to give lil more ideas for the solution questioner is looking for :) – Tats_innit May 24 '12 at 03:12
@vlzvl No worries bruv! lol I was expecting someone asking the same! – Tats_innit May 24 '12 at 03:14
1

You sonofagun. Took my karma because you're a wordy chav! *it should be noted I upvoted yours.* – Ohgodwhy May 24 '12 at 03:54

score 3 · Answer 2 · answered May 24 '12 at 03:03

3

$('input[name="next"]').prop('disabled', true);

answered May 24 '12 at 03:03

Ohgodwhy

44,803
8
64
95

score 2 · Answer 3 · answered May 24 '12 at 03:07

2

you can use:

$("input[type=submit][name='next']").attr("disabled", "disabled");  // unclickable

$("input[type=submit][name='next']").removeAttr("disabled");    // clickable

answered May 24 '12 at 03:07

score 0 · Answer 4 · answered May 24 '12 at 03:14

Disabling an input element does not consistently prevent click events or their further propagation across browsers.

Regardless, it would be appropriate to simply return false if the validation fails, so that an action (i.e. a form submit) is not performed. This will prevent form from being submitted, and since the click handler is still executed you would be able to provide details to the user about why the submission failed:

$("#submit").click(function(){
    var isValid = true;
    /*perform validation checks, changing isValid value to false when needed*/
    return isValid; //will return false if validation fails etc.
});

Make a submit input un-clickable

4 Answers4