Paranoia Paranoia - 2 months ago 10
HTML Question

How can I disable a button until a checkbox is checked?

I would like to have a form button disabled, until a user clicks a checkbox.

This is the code i have (last part of the form)

<div class="checkbox">
<input id="check" name="checkbox" type="checkbox">
<label for="checkbox">
Some Text Here
<input type="submit" name="anmelden" class="button" id="btncheck" value="Send" />

I tried the following


if($(this).attr('checked') == false){

But this is not working and I am not sure why. I don't know how I can disable the button (should be disabled also visually).

Solution (thanks to Rory McCrossan):


Your logic is a little off, try this:

$('#check').change(function () {
    $('#btncheck').prop("disabled", !this.checked);

Updated fiddle

Note that the UI of the button does not update when disabled, however the disabled property does change. You would probably want to add some CSS styling to make it obvious that the button is disabled.

Also, I changed the code to use the change event instead of click to better cater for people who navigate using the keyboard.