Javascript dom中的Rails | 2复选框不可单击_Javascript_Jquery_Ruby On Rails_Twitter Bootstrap_Checkbox

Javascript dom中的Rails | 2复选框不可单击

javascript jquery ruby-on-rails twitter-bootstrap checkbox

Javascript dom中的Rails | 2复选框不可单击,javascript,jquery,ruby-on-rails,twitter-bootstrap,checkbox,Javascript,Jquery,Ruby On Rails,Twitter Bootstrap,Checkbox,我有一个表格在我的网页上，在那里我有复选框 <div class="col-xs-6 p-l-0"> <input type="checkbox" name="q[group_name_eq_any][]" id="tour" value="Tour"> <label for="tour">Tour</label> </div> 游览我在页面和小型设备的引导模式中都使用此复选框 <div class='col-sm-5

我有一个表格在我的网页上，在那里我有复选框

<div class="col-xs-6 p-l-0">
<input type="checkbox" name="q[group_name_eq_any][]" id="tour" value="Tour"> 
<label for="tour">Tour</label>
</div>


游览

我在页面和小型设备的引导模式中都使用此复选框

<div class='col-sm-5 col-md-4 col-lg-3 hidden-xs'>
          <%= render 'search_filters' %>
</div>

..
<div class="modal-content modal-main-index">
      <%= render 'search_filters' %>
    </div>
..


..
..

当然，正因为如此，我有两个相同id的复选框。所以其中一个无法单击。解决这个问题的最好办法是什么。（我不想在点击按钮时用js返回填充模式）

当然，正因为如此，我有两个相同id的复选框。所以有一个其中一个无法单击。解决这个问题的最好办法是什么

使用

class

而不是

id

<div class="col-xs-6 p-l-0">
  <input type="checkbox" name="q[group_name_eq_any][]" class="tour" value="Tour"> 
  <label for="tour">Tour</label>
</div>


游览

当然，正因为如此，我有两个相同id的复选框。所以有一个其中一个无法单击。解决这个问题的最好办法是什么

使用

class

而不是

id

<div class="col-xs-6 p-l-0">
  <input type="checkbox" name="q[group_name_eq_any][]" class="tour" value="Tour"> 
  <label for="tour">Tour</label>
</div>


游览

在html标记上

提示：标签可以通过使用“for”属性或将元素放置在元素内部绑定到元素

因此，如果您有这样一个html页面

<!DOCTYPE html>
<html>
  <body>
    <div class="col-xs-6 p-l-0">
      <label>
        <input type="checkbox" name="q[group_name_eq_any][]" value="Tour">&nbsp;Tour
      </label>
    </div>
    <div class="col-xs-6 p-l-0">
      <label>
        <input type="checkbox" name="q[group_name_eq_any][]" value="Tour">&nbsp;Tour
      </label>
    </div>
  </body>
</html>


游览
游览

这两个复选框都可以通过单击文本进行选择。鉴于

<!DOCTYPE html>
<html>
  <body>
    <div class="col-xs-6 p-l-0">
      <input type="checkbox" name="q[group_name_eq_any][]" id="tour" value="Tour">_
      <label for="tour">Tour</label>
    </div>
    <div class="col-xs-6 p-l-0">
      <input type="checkbox" name="q[group_name_eq_any][]" id="tour" value="Tour">_
      <label for="tour">Tour</label>
    </div>
  </body>
</html>


_
游览
_
游览

将只切换其中一个（在我的示例中是最上面的一个）。

在html标记上

提示：标签可以通过使用“for”属性或将元素放置在元素内部绑定到元素

因此，如果您有这样一个html页面

<!DOCTYPE html>
<html>
  <body>
    <div class="col-xs-6 p-l-0">
      <label>
        <input type="checkbox" name="q[group_name_eq_any][]" value="Tour">&nbsp;Tour
      </label>
    </div>
    <div class="col-xs-6 p-l-0">
      <label>
        <input type="checkbox" name="q[group_name_eq_any][]" value="Tour">&nbsp;Tour
      </label>
    </div>
  </body>
</html>


游览
游览

这两个复选框都可以通过单击文本进行选择。鉴于

<!DOCTYPE html>
<html>
  <body>
    <div class="col-xs-6 p-l-0">
      <input type="checkbox" name="q[group_name_eq_any][]" id="tour" value="Tour">_
      <label for="tour">Tour</label>
    </div>
    <div class="col-xs-6 p-l-0">
      <input type="checkbox" name="q[group_name_eq_any][]" id="tour" value="Tour">_
      <label for="tour">Tour</label>
    </div>
  </body>
</html>


_
游览
_
游览

将只切换其中一个（在我的情况下为顶部）。

这就是我所做的。但无法单击复选框。巡回演出。Id由rails生成。原始代码是这是我所做的。但无法单击复选框。巡回演出。Id由rails生成。原始代码是