如果取消选中复选框，如何禁用提交按钮？

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

Before jQuery 1.6 attr was OK, after 1.6 you must use prop .

$('#checky').click(function(){
  $('#postme').prop('checked', !$(this).checked);
})

Attributes and properties are different things, but unfortunately jQuery took a long time to differentiate between them.

See also: .prop() vs .attr()

Answer 3

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

Answer 4

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

Here you go.

Answer 5

Try this

$(document).ready(function(){
                $("#postme").attr("disabled","disabled");
                    $("#checky").click(function(){
                        if($("#checky").is(":checked")){
                         $("#postme").removeAttr("disabled");   
                         }
                        else{
                            $("#postme").attr("disabled","disabled");
                            }
                    });
                })

Answer 6

Try this way

$('#checky').click(function(){

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

Answer 7

Add to the button #postme a click event that checks if the check box is checked. If it is checked, return false, otherwise return true.

$('#postme').click( function () {
    if ( !$('#checky').attr('checked') ) {
        return false;
    }
});