JQuery: checked not working?

Question

Therefore, I am trying to disable the text box if the checkbox is not selected, but it does not work 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> 

This is a brief example of what I'm trying to do, but it does not want to work. There are no errors in the console.

Can someone explain why this is not working?

Answer 1

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

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

Demo: Fiddle

Answer 2

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

here is fiddle

Answer 3

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

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

You can use the checked property directly without conditions.

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

Answer 4

Try the following:

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

For your jsFiddle to work, you need to:

1) Enable jQuery library

2) Use is(':checked') to check if the checkbox is checked.

3) change() trigger event on the page to get checked status by default.

Demo Screenshot

Answer 5

use this.checked

 $('#check').change(function(){ if(this.checked){ $('#colour').removeAttr('disabled'); } else { $('#colour').attr('disabled',true); } }); 

Fiddle

Answer 6

Here you go:

http://jsfiddle.net/4dwkG/

 <input type="checkbox" id="check" checked /><br /> #<input type="text" size="8" maxlength="6" id="colour" placeholder="ffffff" /> <script> $('#check').change(function(){ if( $('#check').is(":checked") ){ $('#colour').removeAttr('disabled'); } else { $('#colour').attr('disabled',''); } }); </script> 

Answer 7

check this code .. using this.checked

  $('#check').change(function(){ if(this.checked) $('#colour').removeAttr('disabled'); else $('#colour').attr('disabled','disabled'); });