选中和取消选中jquery时，复选框停止工作

我有一个链接到复选框的进度条，当我选中然后取消选中某个复选框时，该复选框将被破坏，并且不会在进度条上更新。从我所读到的内容来看，您可以使用循环来修复此问题，但我正在努力了解如何对y解决方案进行任何帮助或修复。只需更改：

if ($(this).find('input[type="checkbox"]').is(':checked')) {
  $(this).removeClass('checked').addClass('not-checked');
  $(this).find('input[type="checkbox"]').attr('checked', false);
} else {
  $(this).removeClass('not-checked').addClass('checked');
  $(this).find('input[type="checkbox"]').attr('checked', true);
}

至

if ($(this).find('input[type="checkbox"]').is(':checked')) {
  $(this).removeClass('checked').addClass('not-checked');
  $(this).find('input[type="checkbox"]').prop('checked', false);
} else {
  $(this).removeClass('not-checked').addClass('checked');
  $(this).find('input[type="checkbox"]').prop('checked', true);
}

我更新了JSFIDLE代码：