在 do/end 块中禁用 Rails form_for 提交按钮

Question

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

<% @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 块中创建的第一个对象（因此，如果我从下拉列表中选择不在第一个对象中的内容，则不会发生任何事情），并且如果我从下拉列表中选择某些内容在第一个对象中，然后 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 确切地查找什么...