Modern EFM Table

You know how we have the cells click for matrix question https://stackoverflow.com/questions/24013062/jquery-toggle-checkbox-input-with-table-cell-click this is what i am trying to fix in modern mode right now clicking on the cells works but when you click on the checkbox directly it does not i've had this issue in the past and i was able to fix it but for some reason i'm hitting a the wall right now http://efm.surveys.homescan.com/design/SurveyDesigner.aspx?gid=1663160647&pid=1113978335 I have created a copy for you if you want to try it out you will see i have the function in the designer that gets called for cells click feature function AllowTableCellsClickHelper(control, options) { i have one in there labeled old and i tried both not working

by dixalex

HTML

<fieldset id="Q11_WRAPPER" class="question matrix">
  <legend id="Q11_LEGEND" class="sr-only">

  </legend><a id="Q11_HEADING" class="question-heading anchor"></a><span class="question-text"></span>
  <div class="table-responsive response-set">
    <table class="table table-striped" id="TQ11">
      <colgroup class="topic-col">

      </colgroup>
      <colgroup span="3" class="colA">

      </colgroup>
      <colgroup class="colB">

      </colgroup>
      <colgroup span="3" class="colC">

      </colgroup>
      <colgroup span="3" class="colD">

      </colgroup>
      <colgroup class="colE">

      </colgroup>
      <colgroup span="3" class="colF">

      </colgroup>
      <thead>
        <tr class="category-row sr-only tr-category-row">
          <th id="Q11D_0" class="col-0" name="category-row-col-1" title="Q11"><span class="sr-only">Descriptions</span></th>
          <th id="Q11_A_D1" colspan="3" name="category-row-col-2" class="category-row-col-2 category-row col-2" title="2"><span class="sr-only">No Description</span></th>
          <th id="Q11_B_D1" name="category-row-col-3" class="category-row-col-3 category-row col-3" title="3"><span class="sr-only">No Description</span></th>
          <th id="Q11_C_D1" colspan="3" name="category-row-col-4" class="category-row-col-4 category-row col-4" title="4"><span class="sr-only">No Description</span></th>
          <th id="Q11_D_D1" colspan="3" name="category-row-col-5" class="category-row-col-5 category-row col-5" title="5"><span class="sr-only">No Description</span></th>
          <th id="Q11_E_D1" name="category-row-col-6" class="category-row-col-6 category-row col-6" title="6"><span class="sr-only">No Description</span></th>
          <th id="Q11_F_D1" colspan="3" name="category-row-col-7" class="category-row-col-7 category-row col-7" title="7"><span class="sr-only">No Description</span></th>
        </tr>
        <tr class="choice-row tr-choice-row">
          <th class="col-0" id="Q11T_0"...

CSS

body .question.matrix .table-responsive>table {
  border-collapse: collapse;
  border: solid 1px #CCC;
  border-top: none;
}

body .question.matrix .table-responsive>table th,
body .question.matrix .table-responsive>table td {
  border: solid 1px #CCC !important;
}

body .question.matrix .table-responsive {
  overflow-x: visible;
  overflow-y: visible;
}

body .table-responsive {
  overflow-x: visible;
  border: none;
}

body .question.matrix .table-responsive>table td.visible-cell.select-area.ncp_hover {
  cursor: pointer;
  background-color: #ACE;
}

body .question.matrix .table-responsive>table td.visible-cell.select-area.ncp_hover>label.choice-text {
  display: block !important;
  position: relative !important;
  width: 5em !important;
  height: 5em !important;
  background-color: yellow !important;
}

body .modern input[type=radio] {
  left: -9999px;
}

JavaScript

//Turn off classic functionality, it is no longer needed and clashes with EFM's API.
  $('tr[id] .visible-cell').off();

  //Mimmic what EFM is doing to td elements
  $('tr[id] .visible-cell').on('click touch', function(evt) {
    var target_input = $(evt.target).find('input');
    if ($(evt.target).is('.visible-cell')) {
      evt.preventDefault();
      if ($(evt.target).find('input:checkbox').length) {
        $(evt.target).find('input:checkbox:first').trigger(evt.type).change();
      }
      if ($(evt.target).find('input:radio').length) {
        var radio_checked = $(evt.target).find('input:radio:checked').length; //Was radio checked
        var radio_group_name = $(evt.target).find('input:radio').attr('name');
        var radio_group_siblings = $('[name="' + radio_group_name + '"]').not($(evt.target).find('input:radio')); //Other radio input elements that share group name
        //Manually check radio
        if (radio_checked === 0) {
          $(evt.target).find('input:radio').prop('checked', true).attr('aria-checked', 'true').change();
          $(evt.target).addClass('checked');
        }
        //Manually uncheck radio
        if (radio_checked === 1) {
          $(evt.target).find('input:radio:checked').prop('checked', false).attr('aria-checked', 'false').change();
          $(evt.target).removeClass('checked');
        }
        //Manually set EFM attributes to other radio input elements within group set
        $(radio_group_siblings).each(function(index, element) {
          $(element).closest('.visible-cell').removeClass('checked');
          $(element).attr('aria-checked', 'false')
        });
      }
    }
  });

  $('.question.matrix *').on('mouseenter', function(evt) {
      if ($(evt.target).closest('td').is('.visible-cell')) {
        $(evt.target).closest('.visible-cell').addClass('ncp_hover');
      }
      if ($(evt.target).is('.visible-cell')) {
        $(evt.target).addClass('ncp_hover');
      }
    })
    .on('mouseleave',...