我的 bootstrap 5 轮播控件使我的复选框不起作用

问题描述 投票：0回答：1

我使用了一个 Bootstrap 轮播，里面有一个简单的表单。

问题是输入

:my_miss_france_guess
无法工作，因为我添加了引导轮播元素..

当我单击它时，它会显示上一张幻灯片，而不是选中复选框。

这真的很奇怪，因为提交按钮起作用了。

你知道为什么吗？

这是我的代码：

<%= 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 %>

  <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 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"%>
          <%= simple_form_for([@year, @myfifteen]) do |f| %>
          <%= f.input :my_miss_france_guess, as: :boolean, label: "C'est elle la Miss France!" %>
          <%= f.hidden_field :miss_id, value: miss.id %>
          <%= f.button :submit, "Valider" %>
    <% end %>
        </div>
      </div>
    <% end %>
  </div>
</div>

他的是渲染后的 HTML：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<div class="modale">
  <h1>Choisir une miss</h1>
  
  <form action="/years/38/myfifteens/new" accept-charset="UTF-8" method="get">
    <select name="category" id="category">
      <option value="">Select category</option>
      <option value="bombe">bombe</option>
      <option value="mignonne">mignonne</option>
      <option value="pas ouf">pas ouf</option>
      <option value="non">deg</option>
    </select>
    <input type="submit" name="commit" value="Filter" data-disable-with="Filter">
  </form>
  
  <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 id="carouselExample" class="carousel slide">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <div class="avatar-item">
          Bourgogne
          <img src="/assets/bourgogne-218db68fd276a3374ef4ca7dd80b28be22a47cf3c1ac0de95f4a94ec1f96ab18.jpeg">
          <form class="simple_form new_myfifteen" id="new_myfifteen" novalidate="novalidate" action="/years/38/myfifteens" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="hJOBftfkxLDWs7nlIrgol_KeHbeIdhxndMl0LvbUL3x2FSe28CoylrdwvejKOAyY4Adr9dEA06I1oXIYJujrfA" autocomplete="off">
            <fieldset class="mb-3 boolean optional myfifteen_my_miss_france_guess">
              <div class="form-check"><input name="myfifteen[my_miss_france_guess]" type="hidden" value="0" autocomplete="off"><input class="form-check-input boolean optional" type="checkbox" value="1" name="myfifteen[my_miss_france_guess]" id="myfifteen_my_miss_france_guess">
                <label class="form-check-label boolean optional" for="myfifteen_my_miss_france_guess">C'est elle la Miss France!</label>
              </div>
            </fieldset>
            <input value="199" autocomplete="off" type="hidden" name="myfifteen[miss_id]" id="myfifteen_miss_id">
            <input type="submit" name="commit" value="Valider" class="btn" data-disable-with="Valider">
          </form>
        </div>
      </div>

      <div class="carousel-item ">
        <div class="avatar-item">Aquitaine<img src="/assets/Aquitaine-d7b594dfaf68d56abedad683073287ce77c06fc7b7f51f4f3515a220695107ec.jpeg">
          <form class="simple_form new_myfifteen" id="new_myfifteen" novalidate="novalidate" action="/years/38/myfifteens" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="6mv9FsqiyPng04h_zZlmYnmIDP2Za2SwAAPnjjvE8HgY7Vve7Ww-34EQjHIlGUJtaxF6v8Adq3VBa-G46_g0eA" autocomplete="off">
            <fieldset class="mb-3 boolean optional myfifteen_my_miss_france_guess">
              <div class="form-check"><input name="myfifteen[my_miss_france_guess]" type="hidden" value="0" autocomplete="off"><input class="form-check-input boolean optional" type="checkbox" value="1" name="myfifteen[my_miss_france_guess]" id="myfifteen_my_miss_france_guess">
                <label class="form-check-label boolean optional" for="myfifteen_my_miss_france_guess">C'est elle la Miss France!</label>
              </div>
            </fieldset>
            <input value="200" autocomplete="off" type="hidden" name="myfifteen[miss_id]" id="myfifteen_miss_id">
            <input type="submit" name="commit" value="Valider" class="btn" data-disable-with="Valider">
          </form>
        </div>
      </div>
      
      <div class="carousel-item ">
        <div class="avatar-item">Bretagne<img src="/assets/Bretagne-7ee355d04d53538e218043f2e557f1bdb9a975089961604b18afe185b4502dc3.jpeg">
          <form class="simple_form new_myfifteen" id="new_myfifteen" novalidate="novalidate" action="/years/38/myfifteens" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="-Yczz6XUSXy1HwYx2E5oIu5PLALXymSjRqXtANTgk84LAZUHghq_WtTcAjwwzkwt_NZaQI68q2YHzes2BNxXzg" autocomplete="off">
            <fieldset class="mb-3 boolean optional myfifteen_my_miss_france_guess">
              <div class="form-check"><input name="myfifteen[my_miss_france_guess]" type="hidden" value="0" autocomplete="off"><input class="form-check-input boolean optional" type="checkbox" value="1" name="myfifteen[my_miss_france_guess]" id="myfifteen_my_miss_france_guess">
                <label class="form-check-label boolean optional" for="myfifteen_my_miss_france_guess">C'est elle la Miss France!</label>
              </div>
            </fieldset>
            <input value="203" autocomplete="off" type="hidden" name="myfifteen[miss_id]" id="myfifteen_miss_id">
            <input type="submit" name="commit" value="Valider" class="btn" data-disable-with="Valider">
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

ruby-on-rails carousel bootstrap-5
1个回答
0
投票

我的猜测是您已将表单内容放置在轮播控件后面。要么禁用它们并使用自定义控件，重新定位它们，要么在轮播幻灯片上放置填充，以将内容从控件下方向内移出。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.