I have written some code to change the background of a based on the property of the input elements inside it.But that is not working.. Below is my code 

```
$('TABLE TBODY TR TD input').change(function()
{
    alert("Hi");
    if($(this).prop('checked'))
    {
        alert("Checked");
        $(this).closest('TD').css('background-color','gray');
    }
    else
    {
        alert("Not Checked");
        if($(this).closest('TD').prop('class')=='gridanswer')
        {
            this.closest('TD').css('background-color','transparent');
        }
        if(this.closest('TD').prop('class')=='gridlabelalternating')
        {
            this.closest('TD').css('background-color','transparent');
        }
    }
});  

```

Here is my HTML Code 

```
   <table>
   <tr>
   <th style="width: 100px" class="gridlabel">Row 1</th>
   <td headers="Q1_header1" class="gridanswer"><input tabindex="1" type="checkbox" name="Q1a1Xve0_1" id="Q1a1Xve0_1" value="1"/><div class="xxxx-hidden"><span>Row 1</span><label for="Q1a1Xve0_1">Column 1</label></div></td>
   <td headers="Q1_header2" class="gridanswer"><input tabindex="2" type="checkbox" name="Q1a2_1" id="Q1a2_1" value="1"/><div class="xxxx-hidden"><label for="Q1a2_1">Column 2</label></div></td>
   <td headers="Q1_header3" class="gridanswer"><input tabindex="3" type="checkbox" name="Q1a3_1" id="Q1a3_1" value="1"/><div class="xxxx-hidden"><label for="Q1a3_1">Column 3</label></div></td>
   <td headers="Q1_header4" class="gridanswer"><input tabindex="4" type="checkbox" name="Q1a4_1" id="Q1a4_1" value="1"/><div class="xxxx-hidden"><label for="Q1a4_1">Column 4</label></div></td>
   <td headers="Q1_header5" class="gridanswer"><input tabindex="5" type="checkbox" name="Q1a5_1" id="Q1a5_1" value="1"/><div class="xxxx-hidden"><label for="Q1a5_1">Column 5</label></div></td>
   <td headers="Q1_header6" class="gridanswer"><input tabindex="6" type="checkbox" name="Q1a6_1" id="Q1a6_1" value="1"/><div class="xxxx-hidden"><label for="Q1a6_1">Column 6</label></div></td>
   <td headers="Q1_header7" class="gridanswer"><input tabindex="7" type="checkbox" name="Q1a7_1" id="Q1a7_1" value="1"/><div class="xxxx-hidden"><label for="Q1a7_1">Column 7</label></div></td>
   <td headers="Q1_header8" class="gridanswer"><input tabindex="8" type="checkbox" name="Q1a8_1" id="Q1a8_1" value="1"/><div class="xxxx-hidden"><label for="Q1a8_1">Column 8</label></div></td>
   <td headers="Q1_header9" class="gridanswer"><input tabindex="9" type="checkbox" name="Q1a9Xclusive_1" id="Q1a9Xclusive_1" value="1"/><div class="xxxx-hidden"><label for="Q1a9Xclusive_1">None</label></div></td>
   <td headers="Q1_header10" class="gridanswer"><input tabindex="10" type="checkbox" name="Q1a10Xclusive_1" id="Q1a10Xclusive_1" value="1"/><div class="xxxx-hidden"><label for="Q1a10Xclusive_1">Don't Know</label></div></td>
  </tr>
  </table> 

```

And by the default on clicking of any checkbox or radio the property is changing.I want to disable this feature.