禁用窗體按鈕，直到所有的領域都填寫了軌道5.1

Question

我有以下的形式，我尋找一種解決方案，直到窗體全部出來後禁用按鈕。使用Rails 5.1，twitter靴子和jquery。

<div class="well"> 
<%= bootstrap_form_for @dup do |f| %> 

<% if current_user.errors.any? %> 
      <div id="error_explanation" class="errors"> 
      <ul> 
      <% current_user.errors.full_messages.each do |message| %> 
       <li><%= message %></li> 
      <% end %> 
      </ul> 
      </div> 
     <% end %> 
    <%= f.text_field :title, placeholder: "Title Here...", label: "Title* (Required)" %> 
    <%= f.text_field :company_name, placeholder: "Company Name Here...", label: "Company Name* (Required)" %> 
    <%= f.text_area :description, placeholder: "Add a description Here...", label: "Description* (Required)" %> 
    <%= f.text_field :location, placeholder: "Location Here...", label: "location* (Required)" %> 
    <%= f.collection_select :bus_id, Bus.all, :id, :name, include_blank: 'Select A', label: "A* (required)"%> 
    <%= f.label "Needed" %> 
    <%= f.collection_check_boxes :dup_ids, Dup.all, :id, :name, label: (fa_icon 'cogs-o 2x') %> 
    <%= f.fields_for :dups, @g.dups.build do |dups_fields| %> 
     <%= skills_fields.text_field :name, label: "add here (Optional)", placeholder: "add here..." %> 
    <% end %> 
    <%= f.url_field :url, placeholder: "http://...", label: "Url (Optional) - Must start with http://" %> 
    <%= f.hidden_field :company_id, :value => current_user.id unless @job.company_id %> 

    <%= form_tag charges_path do %> 
     <article> 
     <% if flash[:error].present? %> 
      <div id="error_explanation"> 
      <p><%= flash[:error] %></p> 
      </div> 
     <% end %> 
     <label class="amount"> 
      <span>Amount: <%= pretty_amount(@amount) %></span> 
     </label> 
     </article> 

     <script src="https://checkout.stripe.com/checkout.js" class="stripe-button" 
       data-key="<%= Rails.configuration.stripe[:publishable_key] %>" 
       data-description="A month's subscription" 
       data-amount="<%= @amount %>" 
       data-email="<%= current_user.email %>" 
       data-locale="auto"></script> 
    <% end %> 

    <%= f.submit class: "btn btn-primary btn-outline btn-sm" %> 
    <% end %> 
</div> 

尋找一個jQuery解決方案。我如何調用rails窗體標籤字段？

Answer 1

如果添加同一類每個領域你可以指望所有與類中的字段，只允許一次按鈕全部都填寫：

<script type="text/javascript"> 
    function checkForm() { 
     var count = $('.checklist').filter(function() { 
     return $(this).val() !== ""; 
     }).length; 

     var total = $('.checklist').length; 

     if (count == total) { 
     $('.submit-form').removeClass('disabled'); 
     $('.submit-form').removeAttr('disabled'); 
      } else { 
     $('.submit-form').addClass('disabled'); 
     $('.submit-form').attr('disabled', 'disabled'); 
     } 
     console.log(count + '/' + total); 
    } 

    $('.checklist').on('keyup', checkForm); 
</script> 

<%= f.submit class: "btn btn-primary btn-outline btn-sm submit-form disabled", disabled: true %> 

但如果有些複選框，你可能有調整count功能。