Как проверить номер или флажки при загрузке?

Question

Я хочу проверить, сколько флажков отмечено при загрузке, и не допустить превышения определенного количества флажков.

У меня есть следующая форма:

<div id="checkbox" class="">
   <%= form.collection_check_boxes(:category_ids, Category.all, :id, :name, :multiple => true) do |c| %>
      <%= c.label class:"form-check-inline" do %>
        <%= c.check_box + c.text %>
      <% end %>
   <% end %>
</div>

Тогда этот Javascript:

<script>
  $(document).on('turbolinks:load', function(){
      $('#checkbox input:checkbox').change(function () {
      var $cs=$('#checkbox input:checkbox:checked');
      if ($cs.length >= 4) {
        $('#checkbox input:checkbox:not(:checked)').attr("disabled", true);
      }
      else{
        $('#checkbox input:checkbox').attr("disabled", false);
      }
      });
    });
</script>

Это работает, хотя и не проверяет нагрузку. Таким образом, кто-то может технически выбрать 4 из первой отправки, затем обновить и отметить другую для 5 и т. Д.

Это работает но мне интересно, могу ли я уменьшить этот код в один:

  $(document).on('turbolinks:load', function(){
      $('#checkbox input:checkbox').change(function () {
      var $cs=$('#checkbox input:checkbox:checked');
      if ($cs.length >= 4) {
        $('#checkbox input:checkbox:not(:checked)').attr("disabled", true);
      }
      else{
        $('#checkbox input:checkbox').attr("disabled", false);
      }
      });
    });

    $(document).on('turbolinks:load', function(){
        var $cs=$('#checkbox input:checkbox:checked');
        if ($cs.length >= 4) {
          $('#checkbox input:checkbox:not(:checked)').attr("disabled", true);
        }
        else{
          $('#checkbox input:checkbox').attr("disabled", false);

        };
      });

Это возможно или это единственный вариант?

Answer 1

Вы можете избавиться от дублирования, вызвав событие на одном из флажков:

 $(document).on('turbolinks:load', function(){
      $('#checkbox input:checkbox').change(function () {
          // business logic

         // now trigger event on first checkbox
      }).first().change()
 })

В качестве альтернативы, оберните всю бизнес-логику в именованную функцию и вызовите ее при загрузке страницы и передайте ее какссылка на слушатель события изменения

function updateCheckboxes() {
  var $cs = $('#checkbox input:checkbox:checked');
  if ($cs.length >= 4) {
    $('#checkbox input:checkbox:not(:checked)').attr("disabled", true);
  } else {
    $('#checkbox input:checkbox').attr("disabled", false);
  }
}

$(document).on('turbolinks:load', function() {
  updateCheckboxes();
  $('#checkbox input:checkbox').change(updateCheckboxes)
})