AddClass RemoveClass acts different on browsers

Hi I have looked over SO a lot. There are a lot of similar questions, but couldn't find my answer.

I have two checkboxes as following:

<div class="custom-chk">
  <label>
    <input name="Residential" id="Residential" class="upsfilter" type="checkbox" />
    Residential
  </label>
</div>
<div class="custom-chk">
 <label>
   <input name="Commercial" id="Commercial" class="upsfilter" type="checkbox" />
   Commercial
 </label>
</div>

I check/uncheck with following:(if one check the other uncheck)

$('.upsfilter').on('click', function (e) {
 if ($(this).prop('checked')) {
 $('.upsfilter').prop('checked', false);
 $('.upsfilter').parent().removeClass('checked');
 $(this).prop('checked', true);
 $(this).parent().addClass('checked');
 }
)};

label class="checked" is showing the little custom square in checkbox.

Whit the codes above:

a) Firefox, Chrome. Check/Uncheck works but label class="checked" is working opposite. (showing square when checked is false)

b) IE 11 works fine

But if I remove $(this).parent().addClass('checked');

Firefox and Chrome work fine, but IE does the same thing (a)

Is there a compatibility issue with IE, Chrome or Firefox? IE reaction makes more sense. Any help would be appreciated.

Thanks.