如何在加载时检查数字或选中的复选框？答案

【问题标题】：How to check number or checked checkboxes on load?如何在加载时检查数字或选中的复选框？
【发布时间】：2019-03-28 09:12:08
【问题描述】：

我想检查在加载时检查了多少个复选框，并且不允许超过特定数量的复选框。

我有以下表格：

<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);

        };
      });

这是可能的还是唯一的选择？

【问题讨论】：

标签： javascript jquery ruby-on-rails ruby

【解决方案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)
})

【讨论】：