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

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

• javascript
• jquery

• 3 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 Commented May 24, 2012 at 3:02
• @ahren because that's not what he asked for. – Ohgodwhy Commented May 24, 2012 at 3:03
• 1 Duplicate anyway: stackoverflow.com/questions/1414365/… – ahren Commented May 24, 2012 at 3: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 Commented May 24, 2012 at 3:50

4 Answers 4

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);​

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

you can use:

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

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

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.
});