javascript - 在 do/end block 中禁用 Rails form_for 提交按钮

Question

我目前有一个嵌套在 do/end block 中的表单，因此对于创建的每个对象，它将有自己的下拉菜单:

<% @shows.each do |show| %>  
  <%= form_for show, :url => show_record_path(:show_id => show.id), method: :post do |f| %>
    <%= f.select :box_id, Box.all.collect { |p| [ p.box_number, p.id ] }, class: "show-radio-button", :include_blank => true %>
  <%= f.submit "Record", data: { disable_with: "Please wait.." }, :disabled => true, class: "record-button" %>
<% end %>

这是我的 jQuery，如果选择了下拉列表中的选项，则启用提交按钮:

$('#show_box_id').on('keyup change', function(){
  if ($('#show_box_id').val() == '' ) {
    $('.record-button').prop('disabled', true);
    $(".record-button").css("background-color", "");
  } else {
    $('.record-button').prop('disabled', false);
    $(".record-button").css("background-color", "#008C00");
  }
});

问题是 jQuery 仅适用于在 do/end block 中创建的第一个对象(因此，如果我从下拉列表中选择不在第一个对象中的内容，则不会发生任何情况)，并且如果我从下拉列表中选择内容在第一个对象中，然后 jQuery 在所有对象上运行。

如何才能使 jQuery 代码适用于单独创建的每个对象而不影响其他对象？

Answer 1

我认为发生的情况是您依赖表单助手生成的默认 id 来与 JQuery 选择器一起使用。这很令人困惑，因为所有元素都具有相同的 ID...并且 ID 对于页面来说应该是唯一的。您的标记将无效，并且 JQuery 可能会表现得很奇怪，假设有一个唯一的 ID，因此只命中第一个。

如果我能看到生成的标记，我就可以更加确定这一点。

您的处理程序作用于所有表单共享的类，因此将作用于所有表单。

大致如下:

<%= f.select :box_id, Box.all.collect { |p| [ p.box_number, p.id ] }, class: "show-radio-button", id: "show_box_id_#{show.id}", :include_blank => true %>

将修复 ID。然后在 JS 中你可以尝试类似这样的东西:

$('.show_radio_button').on('keyup change', function(e){
  var $this = $(this);
  var $form = $this.closest('form');
  var $button = $form.find(".record_button");
  if ($this.val() == '' ) {
    $button.prop('disabled', true);
    $button.css("background-color", "");
  } else {
    $button.prop('disabled', false);
    $button.css("background-color", "#008C00");
  }
});

执行一次 JQuery 选择器查找并将其存储在局部变量中比继续执行该操作更有效。另外，如果处理共享类的元素，您需要具体说明您想要定位的元素。因此，“$this”(单击的元素)用于对最近的表单进行“最接近”查找(查找树)。然后用它来查找您感兴趣的按钮。

你可以通过巧妙地使用带有 id 号的类或索引来避免一些查找，从而节省处理器周期，或者你可以在 select 标签中使用 data-xxx 属性来告诉你的 JS 到底要查找什么...