Unable to click Table's Td on single click

Unable to click Table's Td on single click

I have table with check boxes in each row which is hidden. I have written a jquery function to check/uncheck the checkbox when clicked on TD and change its background color. My issue is I have to do double click on TD inorder for this change to happen. Can anyone please tell me what the issue is?

Here is the HTML

 <td id="tid" width="10">
      <label for="checkbox"><input type="checkbox" id="c1" value="checked" /></label>
</td>

JQuery Code:

$('#custom-interval-tbl td').click(function(e) {

if($(this).find('input:checkbox').is(':checked')) {

    $(this).find('input:checkbox').attr("checked", "");

    $(this).css({background:"#333333"});

    } else {

         $(this).find('input:checkbox').attr("checked", "checked");

         $(this).css({background:"white"});

    }
});

Thanks