jQuery's :checked not working?

Question

So I'm trying to disable a text field if a checkbox isn't selected however its not working as it should.

Example: http://jsfiddle.net/GV7U9/

<input type="checkbox" id="check" checked /><br />
#<input type="text" size="8" maxlength="6" id="colour" placeholder="ffffff" />

<script>
    $('#check').change(function(){
        if( $('#check:checked') ){
            $('#colour').removeAttr('disabled');
        } else {
            $('#colour').attr('disabled','');
        }
    });
</script>

That is a short example of what I'm trying to do but it doesn't want to work. There are no errors in the console.

Could someone please explain why this isn't working?

Answer 1

try $('#check').is(':checked')

here's Fiddle

Answer 2

Use .prop() also use the checked state to set the value

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

Demo: Fiddle

Answer 3

check this code..using this.checked

 $('#check').change(function(){

                if(this.checked)
                $('#colour').removeAttr('disabled');
                else 
                $('#colour').attr('disabled','disabled');

        });

Answer 4

Use length to find if element is checked otherwise your condition will be true always. When the length is greater then 0 condition will be true and false otherwise.

 if( $('#check:checked').length ){
        $('#colour').removeAttr('disabled');
  } else {
        $('#colour').attr('disabled','');
  }

You can use checked property directly without condtion.

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