Question

每当我单击标签（在复选框中）时，它就会到达页面顶部。

我实际上已经删除了所有脚本和样式，但仍然给出了相同的结果。它可能与循环有关，但仍在调查中。

<% @requests.each do |request| %>
    <%= form_with(model: request, remote: true, :id => "form#{id}", :class => "form-class") do |form| %>
        <%= form.collection_check_boxes :category_ids, Category.all, :id, :name do |b| %>    
          <%= b.check_box %>
          <%= b.label   %>
        <% end %>
    <% end %>
<% end %>

生成的HTML

<input type="checkbox" value="24" name="request[category_ids][]" id="request_category_ids_24">
<label for="request_category_ids_24">This is a general option</label>

每个标签和输入都有唯一的ID

它应该选中该复选框，并且不执行任何操作，而是转到页面顶部。

Answer 1

问题是当您在rails中创建Forms循环时，它将最终在输入和标签以及循环的不同部分之间创建非唯一ID。它与标签的“ for”和输入的“ id”之间的连接有关。

要解决此问题，请创建自定义ID，以确保标签激活了正确的复选框。

问题：

<%= b.check_box %>
<%= b.label   %>

解决方案：

<%= b.check_box id: "#{request.id}-#{b.value}" %>
<%= b.label for: "#{request.id}-#{b.value}" %>

单击复选框标签时出现的问题

1 个答案: