How do i disable a submit button when checkbox is uncheck?

Question

I have something here that cannot seem to help me disable the submit button. any ideas?

<input type="checkbox" checked="checked" id="checky"><a href="#">terms and conditions</a>
<input type="submit" id="postme" value="submit">

$('#checky').click(function(){
    if($(this).checked == false){
         $('#postme').attr("disabled","disabled");   
    } else {
        $('#postme').removeAttr('disabled');
    }
});

Answer 1

You should be checking for the attribute checked and not the method.

Updated fiddle : http://jsfiddle.net/8YBu5/7/

$('#checky').click(function(){
    if($(this).attr('checked') == false){
         $('#postme').attr("disabled","disabled");   
    } else {
        $('#postme').removeAttr('disabled');
    }
});

EDIT

Remember that this code needs to be wrapped inside $(document).ready() or put at the bottom of your html code, otherwise your JS will bind itself to DOM elements that have not been loaded yet and will fail.

Wrapping it in .ready()

<script type='text/javascript'>
$(document).ready(function(){
    $('#checky').click(function(){
        if($(this).attr('checked') == false){
             $('#postme').attr("disabled","disabled");   
        } else {
            $('#postme').removeAttr('disabled');
        }
    });
});
</script>

This code can be put anywhere in the document and will only trigger once the DOM is ready so you don't have to worry about premature triggers.

Putting it at the bottom of your document

<!-- some HTML -->
<script type='text/javascript'>
        $('#checky').click(function(){
            if($(this).attr('checked') == false){
                 $('#postme').attr("disabled","disabled");   
            } else {
                $('#postme').removeAttr('disabled');
            }
        });
</script>
</body>
</html>

If you're putting it at the bottom of your document, you don't need to wrap it in .ready() because the javascript will not be read until everything else has loaded. There is a performance boost in this method (if you have a lot of JS)

You can use either one of these methods to make sure that your JS binds event handling methods to DOM elements only after they have finished loading.

Answer 2

if(!$(this).is(':checked') ...