Использование Jquery для более эффективного добавления и удаления классов на основе выбора флажка

Использование .NET MVC с представлением, имеющим таблицу с 14 столбцами. Я разрешаю пользователю открывать модальное окно и устанавливать/снимать флажки, чтобы скрыть и показать эти столбцы. Но код громоздкий и кажется неэффективным. Однако это работает, я просто ищу ответ о том, как сделать эту вещь лучше.

То, как я это сделал, я обозначил TH вот так

  <th id = "col1" class = "toggleMe1">
         UW
    </th>
    <th class = "toggleMe2">
       @Html.DisplayNameFor(model => model.Client)
     </th>

И ТАК ДАЛЬШЕ для TH и TD

<td class = "toggleMe1">
     @Html.DisplayFor(modelItem => item.NameOf)
</td>
<td class = "toggleMe2">
     @Html.DisplayFor(modelItem => item.Client)
 </td>

Вот Jquery, который я использую. Чтобы я мог изолировать эти столбцы по отдельности, не отключая/включая другие, я должен изолировать их таким образом. Класс ColorMe имеет display:none; имущество. Вот и все.

if ($("#col1Off").is(":checked")){
       $('.toggleMe1').addClass("ColorMe");
  } else {
       $('.toggleMe1').removeClass("ColorMe");
  }
  if ($("#col2Off").is(":checked")) {
        $('.toggleMe2').addClass("ColorMe");
  } else {
    $('.toggleMe2').removeClass("ColorMe");
  }

Я должен сделать это для всех 14 столбцов. Есть ли способ сократить это? Что-то более эффективное?

РЕДАКТИРОВАТЬ. ФРАГМЕНТ КОДА.

Модальное окно для установки флажков. Посмотрите в div class="Modal-body" и найдите их. Сейчас только два

<!-- Button trigger modal -->
        <button type = "button" class = "btn btn-primary" data-toggle = "modal" data-target = "#exampleModal">
            Launch demo modal
        </button>

        <!-- Modal -->
        <div class = "modal fade" id = "exampleModal" tabindex = "-1" role = "dialog" aria-labelledby = "exampleModalLabel" aria-hidden = "true">
            <div class = "modal-dialog" role = "document">
                <div class = "modal-content">
                    <div class = "modal-header">
                        <h5 class = "modal-title" id = "exampleModalLabel">Modal title</h5>
                        <button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close">
                            <span aria-hidden = "true">&times;</span>
                        </button>
                    </div>
                    <div class = "modal-body">
                        <input type = "checkbox" id = "col1Off"  data-chclass = "toggleMe1" />
                        <label for = "col1">Uw</label>
                        <input type = "checkbox" id = "col2Off"  data-chclass = "toggleMe2" />
                        <label for = "col2">Client</label>
                    </div>
                    <div class = "modal-footer">
                        <button type = "button" class = "btn btn-secondary" data-dismiss = "modal">Close</button>
                        <button type = "button" class = "btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>

КОД, чтобы открыть MODAL и код для переключения классов для скрытия/отображения.

$('#exampleModal').on('hide.bs.modal', function (e) {
    var button = $(event.relatedTarget) // Button that triggered the modal
    var recipient = button.data('whatever') // Extract info from data-* attributes

    $('input[type=checkbox]').change(function () {
        var el = $(this).data('chclass');
        $('.' + el).toggleClass("ColorMe");
    });


    // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
    // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
    var modal = $(this)
    modal.find('.modal-title').text('Hide or Unhide Columns')
    modal.find('.modal-body input').val(recipient)
})

Многое, наверное, не нужно. Я просто тестировал модальное окно и скопировал пример кода для тестирования.

Мне нужно открыть его дважды, чтобы класс переключения работал