jQuery disabled button with checkbox issue

Question

I have the following code which enables a button when the checkbox is checked.

The following is a snippet from the code I have in my HTML page. It's much the same however for some reason it's not working. I think I may have been looking at it for too long.

<script type='text/javascript'>
$(function() {
  $('#agree').click(function() {
    var satisfied = $('#agree:checked').val();
    if (satisfied != undefined) $('#submit').removeAttr('disabled');
    else $('#submit').attr('disabled', 'disabled');
  });
});
</script>



<form>
    <table>
    <td colspan="5"><input type="checkbox" id="agree" name="agree" />I have read and agree to the terms and 

    conditions</td>
                  </tr>
                  <tr>
                    <td colspan="5" align="center"><input name="Submit" type="submit" id="submit" disabled value="I Accept. 

    Submit"/>
                  <label>
                      <input name="reset" type="reset" id="reset" value="Reset" />
                      <input type="hidden" name="ip" value=" echo $REMOTE_ADDR; " />
                  </label></td>
                  </tr>
                    <tr>
                    <td>*Required Fields</td>
                    <td colspan="4"></td>
                  </tr>
                   <tr>
                    <td colspan="5"><h3></h3>
                     <p>&nbsp;</p></td>
                  </tr>
                </table>
            </fieldset>
            </form>

Are the {}'s after the if () optional? I've always done if () {}. — orolo
– orolo, Commented Oct 4, 2010 at 18:28
@orolo: Yes, they're optional. It's good practice to use them anyway, but if they are not there, the standard is to assume that the next line (and only the next line) is the only thing in the block. — Jeff Rupert
– Jeff Rupert, Commented Oct 4, 2010 at 18:32

Nick Craver · Accepted Answer · 2010-10-04 18:28:37Z

6

You can also set disabled with true and false, so you can simplify it down to:

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

Test it out here, note there was also some invalid markup going on resulting in some cross-browser inconsistencies, it should look something like this:

<form>
  <table>
    <tr><td align="center"><input type="checkbox" name="agree" id="agree">I agree Terms and Conditions</td></tr>
    <tr><td align="center"><input type="submit" name="submit" id="submit" value="submit" disabled></td></tr>
  </table>
</form>

Also the .change() method's a bit better here, to ensure you have the correct state.

answered Oct 4, 2010 at 18:28

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

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

6 Comments

BoltClock Over a year ago

+1 Didn't know that! Does this also work for other x="x" attributes like readonly etc?

Nick Craver Over a year ago

@BoltClock's - Yup, selected as well, each of those are booleans in the DOM :)

109221793 Over a year ago

@Nick, that's perfect. Thank you. I will check this as the right answer once the time limit is up.

Jeff Rupert Over a year ago

@Nick: Will you run into any IE issues with change? I know I've had problems with IE and the change event in the past, so I'm just wondering if it would apply here.

Nick Craver Over a year ago

@Jeff - Nope, that's with bubbling, and in < 1.4.2 versions :)

|

Collectives™ on Stack Overflow

jQuery disabled button with checkbox issue

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related