# of Checked Boxes Doesn't Always "Keep Up"

I have a table with multiple header rows, something like this:

Row 1:   Month 1      Month 2    Month3 

Row 2:   Ct % Ttl     Ct % TTl   Ct % TTl

I want to give the user ability to select which fields they want to see, so if they only want to see Ct & Ttl, then the colspan of the first row needs to adjust. My code snippet below is "almost" working, the problem is, sometimes after a field is checked or unchecked, the new count is wrong -- it will stay on the "old count". So like above, the initial colspan is 3, a user unchecks one of the boxes, the colspan should go down to 2, but it will stay at 3. Then, the user can uncheck a second box, and the count will catch up and correctly show 1. Is my code missing something?

var options = [];

$(document).on('click', '.dropdown-menu a', function(event) {
  var $target = $(event.currentTarget),
    val = $target.attr('data-value'),
    column = 'table .' + val,
    $inp = $target.find('input'),
    idx;

  if ((idx = options.indexOf(val)) > -1) {
    options.splice(idx, 0);
    setTimeout(function() {
      $inp.prop('checked', true)
    }, 0);
  } else {
    options.push(val);
    setTimeout(function() {
      $inp.prop('checked', false)
    }, 0);
  }

  $(column).toggle();

  var ct = $("#ddColFilter input:checked").length;

  $("#tb").val(ct);

  $(".topRow").attr("colspan", parseInt(ct));

  $(event.target).blur();

  return false;
});

<script src="http://ift.tt/1oMJErh"></script>
<div class="col-md-1 button-group" style="padding-top: 12px; padding-bottom: 1px; margin-bottom: 1px;">
  <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span>&nbsp;Filter Columns&nbsp;<span class="caret"></span>
  </button>
  <ul id="ddColFilter" class="dropdown-menu">
    <li>
      <a href="#" class="small underlineText_No" data-value="attRate" tabindex="-1">
        <input type="checkbox" checked="checked" />&nbsp;Attendance Rate</a>
    </li>
    <li>
      <a href="#" class="small underlineText_No" data-value="enrDays" tabindex="-1">
        <input type="checkbox" checked="checked" />&nbsp;Ttl Enrollment Days</a>
    </li>
    <li>
      <a href="#" class="small underlineText_No" data-value="msdDays" tabindex="-1">
        <input type="checkbox" checked="checked" />&nbsp;Ttl Missed Days</a>
    </li>
    <li>
      <a href="#" class="small underlineText_No" data-value="lstRev" tabindex="-1">
        <input type="checkbox" checked="checked" />&nbsp;Lost Revenue</a>
    </li>
    <li>
      <a href="#" class="small underlineText_No" data-value="lstHrs" onclick="" tabindex="-1">
        <input type="checkbox" checked="checked" />&nbsp;Instrl Hrs Lost</a>
    </li>
  </ul>
</div>

<div>
  <input id="tb" type="text" value="5" />
</div>