0

我有一个索引页面，我必须在其中过滤发票，due_date以便为批量版本做好准备。这个想法是让提交按钮保持禁用状态，直到 astart_date和end_date被选中。

我simple_form使用 flatpickrJS 进行了以下工作，并且已将其添加data-targets到其输入字段中：

<div class="col-md-6 my-2">
  <%= simple_form_for :date_params, { url: admin_invoices_batch_edit_index_path, method: :get } do |f| %>
    <%= f.input :start_date, as: :string, placeholder: "Start date for filter",
                                                  input_html: { data:{ controller: "flatpickr", target: "required",
                                                                attributes:{ enableTime: false, enableSeconds: false } } }
                                                                 %>
    <%= f.input :end_date, as: :string, placeholder: "End date for filter", input_html: { data:{ controller: "flatpickr", target: "required",
                                                             attributes:{ enableTime: false, enableSeconds: false } }
                                                             }
                                                             %>
    <%= f.button :submit, "Filtrar por fecha" %>
  <% end %>
</div>

我也有这个simple_form选项来选择due_date所有发票都将更新到的一个，并且我需要保持禁用此表单的提交按钮，直到targets选择了所有必需的（即直到在第一个表单中选择了开始和结束日期）。

<div class="col-md-6 my-2" data-controller="activable">
    <%= simple_form_for :due_date, { url: admin_invoices_batch_edit_index_path } do |f| %>
      <%= f.input :due_date, as: :string, placeholder: "Nueva fecha de recibo",
      input_html: { data:{ controller: "flatpickr",
        attributes:{ enableTime: false, enableSeconds: false } } }
        %>
      <% if params[:date_params].present? %>
        <%= hidden_field_tag :start_date, params[:date_params][:start_date] %>
        <%= hidden_field_tag :end_date, params[:date_params][:end_date] %>
       <% end %>
       <%= f.button :submit, "Update Invoices", id: "deactivable-submit", disabled: true %>
    <% end %>
  </div>

这是我的 Stimulus 控制器，但我不知道如何检查是否requiredTargets已全部选中，以便启用禁用的按钮。

import { Controller } from 'stimulus';

export default class extends Controller {
  static targets = ['deactivable required']
  initialize() {
  }

  connect() {
    this.requiredTargets.forEach((element) => {
      element.config.onChange.push(function() { } ); })
    // check that all required targets have been selected?
  }

  toggle(){
    this.deactivableTargets.toggleAttribute("disabled");
  }

}
4

0 回答 0