すべてのフィールドが塗りつぶされるまでフォームボタンを無効にする5.1

Question

私は次のフォームを持っています。フォームがすべてフィールドアウトするまでボタンを無効にするソリューションを探しています。 Rails 5.1を使って、twitter bootsrapと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ソリューションを探しています。レールをタグフィールドと呼ぶにはどうすればいいですか？

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の機能を調整します。