Bootstrap 5轮播控件导致复选框无法正常工作的问题排查

核心问题：轮播控件位置不符合Bootstrap规范 #

你的Bootstrap轮播控制按钮（carousel-control-prev/carousel-control-next）被放置在轮播容器 <div id="carouselExample"> 外部，这会导致点击复选框时，事件向上冒泡被轮播的事件监听器错误捕获，触发轮播切换动作，而非执行复选框勾选逻辑。

Bootstrap 5要求轮播控件必须嵌套在轮播容器内部，与carousel-inner同级，这样事件才能被正确绑定到控件本身，不会干扰内部表单元素的交互。

次要问题：重复DOM ID #

渲染后的HTML中，所有表单的ID均为new_myfifteen，所有复选框ID均为myfifteen_my_miss_france_guess。DOM中ID必须唯一，重复ID会导致标签关联失效、JS选择器异常，虽不是当前问题的直接诱因，但需同步修复。

修复代码示例 #

调整控件位置+修复重复ID后的ERB代码： #

<%= form_tag new_year_myfifteen_path(@year), method: :get do %>
  <%= select_tag 'category', options_for_select(@categories, @selected_category), include_blank: 'Select category' %>
  <%= submit_tag 'Filter' %>
<% end %>

<div id="carouselExample" class="carousel slide">
  <div class="carousel-inner">
    <% @misses.each do |miss| %>
      <div class="carousel-item <%= 'active' if miss == @misses.first %>">
        <div class="avatar-item">
          <%= miss.region %>
          <%= image_tag "#{miss.photo}.jpg"%>
          <!-- 生成唯一表单ID -->
          <%= simple_form_for([@year, @myfifteen], html: { id: "new_myfifteen_#{miss.id}" }) do |f| %>
            <!-- 生成唯一复选框ID -->
            <%= f.input :my_miss_france_guess, as: :boolean, label: "C'est elle la Miss France!", 
                        input_html: { id: "myfifteen_#{miss.id}_my_miss_france_guess" } %>
            <%= f.hidden_field :miss_id, value: miss.id %>
            <%= f.button :submit, "Valider" %>
          <% end %>
        </div>
      </div>
    <% end %>
  </div>
  <!-- 将轮播控件移至轮播容器内部 -->
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

内容的提问来源于stack exchange，提问作者Alice Laurin