How to disable submit button with jquery?

Question

I have a checkbox which needs to be checked in order for it to be possible to submit the form.

So I set the submit button disabled attribute to "disabled". Then I tried binding the checkbox to it like this so it would enable/disable the submit button. It does not work:

$('input[type=checkbox]#confirm').click(function() {
    if ($(this).is(':checked')) {
        $('#submitButton').removeAttr('disabled');
    } else {
        $('#submitButton').attr('disabled', 'disabled');
    }
});

The submit button stays disabled.

HTML:

<form enctype="application/x-www-form-urlencoded" method="post" action="/controller/action"><dl class="zend_form">
<dd id="confirm-element">
<input type="hidden" name="confirm" value="0"><input type="checkbox" name="confirm" id="confirm" value="1" class="input-checkbox"></dd>
<dt id="confirm-label"><label for="confirm" class="required">Lorem ipsum.</label></dt>
<dt id="submitButton-label">&#160;</dt><dd id="submitButton-element">
<input type="submit" name="submitButton" id="submitButton" value="Potvrdiť" class="input-submit" disabled="disabled"></dd>

<input type="hidden" name="csrf_token" value="ed3e9347145a3eb3d58c4c21d813df26" id=""></dl></form>

Setting the submit button to disabled might not be enough. Consider preventing the default submit event of the form (in some browsers pressing enter in a simple input text box also submits the form). — kapa
– kapa, Commented Jan 13, 2011 at 7:51
@bazmegakapa That's not needed. I have that secured at the server side if someone tries to go around the javascript. I just need to make it visually visible that the form can only be submitted after the checkbox input has been checked. — Richard Knop
– Richard Knop, Commented Jan 13, 2011 at 7:52

Reigel Gallarde · Accepted Answer · 2011-01-13 08:43:34Z

1

try

$('#confirm').change(function() {
   $('#submitButton').attr('disabled', !this.checked);
});

according to comments below, now this should fixed your problem.

$('#confirm').change(function() {
   $('#submitButton').button( "option", "disabled", !this.checked );
});

edited Jan 13, 2011 at 8:43

answered Jan 13, 2011 at 8:23

Reigel Gallarde

65.4k21 gold badges126 silver badges142 bronze badges

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

1 Comment

Reigel Gallarde Over a year ago

hmmm I made a type there. and lonesomeday already fixed it. it should work... here's a demo

George Anderson · Accepted Answer · 2011-01-13 07:43:02Z

0

$("#submitButton").attr("disabled", true);

answered Jan 13, 2011 at 7:43

George Anderson

9928 silver badges14 bronze badges

Comments

Yoram de Langen · Accepted Answer · 2011-01-13 07:56:01Z

0

You can disable the button, but you still have a click on the button so you have to unbind the click event from the button:

$("#submitButton").attr('disabled', 'disabled').unbind('click');

answered Jan 13, 2011 at 7:56

Yoram de Langen

5,4993 gold badges26 silver badges32 bronze badges

5 Comments

Richard Knop Over a year ago

That's not my problem. My issue is that the submit button stays disabled.

Richard Knop Over a year ago

You cannot click on a disabled button anyways.

Yoram de Langen Over a year ago

if tested your script, and it runs aswel.. but you want a normal form post? try to post form with .submit() on the click event from the button

Richard Knop Over a year ago

Ehm. Read my question. I want to disable/enable the submti button with the checkbox. That's means setting/unsetting its disabled attribute.

Yoram de Langen Over a year ago

like i said, i tested you script you posted. it works fine.. i tested this: pastie.org/1455449

Collectives™ on Stack Overflow

How to disable submit button with jquery?

3 Answers 3

1 Comment

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related