Button color doesn't change when checkbox is selected

Question

I have a checkbox, the default value is true. When I uncheck the checkbox my button color is changing. But when I check checkbox again it doesn't change color of my button.

My Javascript:

if(('#terms').prop('checked', true)) $('button').css('background-color','grey');
if(('#terms').prop('checked', false)) $('button').css('background-color','#09AA9D');

Answer 1

It should be:

$('#terms').prop('checked')

when checking for the property value. What you were using is to set the property.

Try this:

if($('#terms').prop('checked')) {
      $('button').css('background-color','grey');
}else {
   $('button').css('background-color','#09AA9D');
 }