

現在、Railsアプリを製作しています。  
そのアプリの中で以下のように「明細を追加」ボタンを押下してtableの行を追加していくのですが、行数が5行を超えたら、「明細を追加」ボタンを非表示にするにはどうすれば良いでしょうか？

以下のコードでは5行を超えても「明細を追加」ボタンが表示されたままで、まだ行を追加することができてしまいます。以下のRailsのコードではなく、HTMLとjQuery(JavaScript)のサンプルでも問題ありませんので、アドバイス頂きたいです。宜しくお願い致します。

[code]

    $(function() {
       function check_content() {
          if($('#costs_form_area .nested-fields').length == 5) {
               $('.specification_btn a.add_fields').hide();
          } else {
              $('.specification_btn a.add_fields').show();
          }
       }
    });
    
    <div id="costs_form_area">
      <%= f.fields_for :costs do |costs_form| %>
        <%= render 'cost_fields', f: costs_form %>
      <% end %>
      <div class="text-center specification_btn">
        <%= link_to_add_association '明細を追加', f, :costs, class: 'add_fields' %>
      </div>
    </div>
    
[/code]


CC BY-SA 3.0
2016-09-29T05:20:09.343
29231
2016-09-29T06:05:17.813
12323
question
javascript ruby-on-rails jquery
「明細を追加」ボタンを押下して、一定数の行数を超えたら、「ボタン」を非表示にしたいです。

[code]

    $(function() {
       function check_content() {
          if($('#costs_form_area .nested-fields').length == 5) {
               $('.specification_btn a.add_fields').hide();
          } else {
              $('.specification_btn a.add_fields').show();
          }
       }
    });
    
[/code]

だと無名関数の中で関数を定義しただけなので、  
実行するには

[code]

    $(function() {
       (function check_content() {
          if($('#costs_form_area .nested-fields').length == 5) {
               $('.specification_btn a.add_fields').hide();
          } else {
              $('.specification_btn a.add_fields').show();
          }
       })();
    });
    
[/code]

のようにするか

[code]

    $(function() {
        if($('#costs_form_area .nested-fields').length == 5) {
            $('.specification_btn a.add_fields').hide();
        } else {
            $('.specification_btn a.add_fields').show();
        }
    });
    
[/code]

のようにする必要があります。


CC BY-SA 3.0
2016-09-29T06:05:17.813
29232
2016-09-29T06:05:17.813
5044
29231
answer