javascript - 如何自动提交所有选中check_box的表单？

Question

向用户发出命令“选择 5 个灵感”

显示了 20 多个灵感的列表。

每个励志面板的右上角都有一个check_box。

<% @inspirations.each do |inspiration| 
  <%= simple_form_for(current_user.inspirations.build) do |f| %>
    <%= f.check_box :check %>
    <%= inspiration.name %>
  <% end %>
<% end %>

<script>
  # How to make script where once a 5th check_box is checked then submit all forms with :check automatically?
  # Below is work in progress...
  $(function () {
    $('input[type=checkbox]').is(':checked').length;
    form.submit();
  })
</script>

需要什么 JavaScript 才能完成这项工作？

更新

fast_track_one.html.erb

<%= simple_form_for(current_user.inspirations.build) do |f| %>
  <% @inspirations.each do |inspiration| %>
    <%= check_box_tag 'inspiration_ids[]', inspiration.id %>
    <%= inspiration.name %>
  <% end %>
  <% f.submit %>
<% end %>

<script>
    $(document).on('click', 'input[name="inspiration_ids[]"]', function() {
      var count = $('input[name="inspiration_ids[]"]:checked').length;
      if (count === 5) {
        $('#new_inspiration').trigger('submit.rails');
      }
    });
</script>

inspirations_controller.rb

class InspirationsController < ApplicationController
  respond_to :html, :json
  before_action :set_inspiration, only: [:show, :like]
  before_action :correct_user, only: [:edit, :update, :destroy]

  def fast_track_one
    @suggestions_user = User.find(1)
    @inspirations = @suggestions_user.inspirations
    if params[:inspiration_ids].present? && params[:inspiration_ids].size == 5
      @inspirations = Inspiration.where(id: params[:inspiration_ids])
      @inspirations.each do |inspiration|
        current_user.inspirations << inspiration
      end
    end
  end

  def index
    if params[:tag]
      @inspirations = Inspiration.tagged_with(params[:tag])
    else
      @inspirations = current_user.inspirations.order("created_at DESC") if current_user.inspirations.present?
    end
  end

  def show
    @commentable = @inspiration
    @comments = @commentable.comments
    @comment = Comment.new
    @notable = @inspiration
    @notes = @notable.notes
    @note = Note.new
    if current_user
      @correct_user = current_user.inspirations.find_by(id: params[:id])
    else
      @correct_user = nil
    end
  end

  def new
    @suggestions_user = User.find(21) #1 in Development
    @inspirations = @suggestions_user.inspirations.top_6
    @maximum_length = Inspiration.validators_on( :name ).first.options[:maximum]
    existing_inspiration = Inspiration.find_by_id params[:inspiration_id]
    if existing_inspiration
      @inspiration = existing_inspiration.dup
    elsif params[:inspiration].try(:[], :name)
      @inspiration = Inspiration.new(inspiration_params) 
    else
      @inspiration = current_user.inspirations.build
    end
    respond_modal_with @inspiration
  end

  def edit
    @suggestions_user = User.find(21)
    @maximum_length = Inspiration.validators_on( :name ).first.options[:maximum]
    @inspirations = @suggestions_user.inspirations.order("created_at DESC")
    existing_inspiration = Inspiration.find_by_id params[:inspiration_id]
    if existing_inspiration
      @inspiration = existing_inspiration.dup
      @inspiration.image_file_name = existing_inspiration.image_file_name
    end
    respond_modal_with @inspiration
  end

  def create
    #@suggestions_user = User.find(21)
    #@inspirations = @suggestions_user.inspirations.order("created_at DESC")
    if current_user == nil
      # If there is no user, store the lifetime values to the session.
      session[:inspiration_name] = inspiration_params[:name]
      session[:inspiration_image] = inspiration_params[:image]
      redirect_to signup_path
    else
      #@inspiration.image_remote_url = params[:inspiration_image]
      @inspiration = current_user.inspirations.build(inspiration_params)
      if @inspiration.conceal == true
        @inspiration.save
        if current_user.inspirations.count < 5
          redirect_to root_url
        else
          respond_modal_with @inspiration
        end
        flash[:info] = 'INSPIRATION SECRETLY SAVED. YOUR INSPIRATIONS ARE RANDOMIZED ON YOUR HOME PAGE TO GIVE YOU A FRESH SPARK OF INSPIRATION - EVERY TIME!'
      elsif
        @inspiration.save
        track_activity @inspiration
        if current_user.inspirations.count < 5
          redirect_to root_url
        else
          respond_modal_with @inspiration
        end
        flash[:info] = 'INSPIRATION SAVED. YOUR INSPIRATIONS ARE RANDOMIZED ON YOUR HOME PAGE TO GIVE YOU A FRESH SPARK OF INSPIRATION - EVERY TIME!'
      else
        respond_modal_with @inspiration
      end
    end
  end

  def update
    if @inspiration.update(inspiration_params)
      respond_modal_with @inspiration, location: root_path
      flash[:info] = 'INSPIRATION UPDATED'
    else
      respond_modal_with @inspiration
    end
  end

  def destroy
    @inspiration.destroy
    redirect_to root_path
    flash[:alert] = 'INSPIRATION DELETED'
  end

  def like
    if current_user
      @inspiration_like = current_user.inspiration_likes.build(inspiration: @inspiration)
      if @inspiration_like.save
        @inspiration.increment!(:likes)
        flash[:info] = 'THANKS FOR LIKING!'
      else
        flash[:alert] = 'TWO MANY LIKES!'
      end  
        redirect_to(:back)
    else 
      redirect_to root_path
      flash[:alert] = "PLEASE SIGN IN FIRST"
    end
  end

private

  def set_inspiration
    @inspiration = Inspiration.find(params[:id])
    #redirect_to root_url unless @inspiration.user_id == current_user.id or @inspiration.conceal == false
  end

  def correct_user
    @inspiration = current_user.inspirations.find_by(id: params[:id])
    redirect_to root_url, notice:  "NOT AUTHORIZED TO INSPIRATION" if @inspiration.nil?
  end

  def inspiration_params
    params.require(:inspiration).permit(:name, :image, :conceal, :tag_list, :content, :commentable, :comment, :like, :check, :image_file_name, :image_content_type, :image_file_size, :image_updated_at)
  end
end

Answer 1

也许你可以尝试这样的事情:

<script>
  $(document).on('change', 'input[type=checkbox]', function() {
    if ($('input[type=checkbox]').is(':checked').length == 5) {
       $('form').submit(); // form should be selected as DOM element
    }
  })
</script>