Hiding Checkboxes inside of a DIV

Hiding Checkboxes inside of a DIV

I have the following html code and I am trying to conditionally hide checkboxes inside of this div.  

<div class="form-item form-type-checkbox form-item-field-unlimited-area-507.3">

 <input type="checkbox" id="edit-field-unlimited-area-5073" name="field_unlimited_area[507.3]" value="507.3" class="form-checkbox">  <label class="option" for="edit-field-unlimited-area-5073">Section 507.3 - unlimited area for a B, F, M or S building no more than one story above grade plane. </label>

</div>

In theory I should just be able to hide the entire div with:

$("#form-item form-type-checkbox form-item-field-unlimited-area-507.3").hide();

but it doesn't work.  Here is my JSFIDDLE:


How come I can't hide that checkbox and the lable when I hide the div?