什么可以使复选框不显示在页面上？

Question

我在3.2应用程序中使用Twitter Bootstrap for Rails，并且没有看到复选框出现。

如果我只用简单的HTML（带有硬编码的复选框，并使用常规的Bootstrap资源）查看同一页面，它就可以正常工作。

HTML代码生成正确，我相信......例如：

<div class="field">
    <div class="control-group check_boxes optional"><label class="check_boxes optional control-label">Listing Type</label><div class="controls"><label class="checkbox"><input class="check_boxes optional" id="search_listing_type_id_1" name="search[listing_type_id][]" type="checkbox" value="1" />For Sale</label><input name="search[listing_type_id][]" type="hidden" value="" /></div></div>
  </div>

这是Rails代码：

<%= f.input :listing_type_id, collection: ListingType.order(:name), as: :check_boxes, label: "Listing Type" %>

这是live example。在文本“列出平方英尺”旁边，应该是一个复选框。向下滚动到设施，在那里你会看到一个显然应该有复选框的列表。

这在开发中也不起作用。

不太确定为什么它没有出现。

思想？

Answer 1

看起来uniform.js将复选框的不透明度设置为0。

如果您不使用uniform.js，请尝试禁用它。

更新：看起来你在精灵图片上获得了404？可能是一个统一的主题精灵图像？

GET http://realty-cloud.herokuapp.com/img/sprite.png 404 (Not Found) 

另一个更新：这绝对是个问题。 Uniform通过使输入0的不透明度起作用，使它不可见，但仍然可以点击，并且稍微改变标记，所以它看起来像这样。

<div class="checker" id="uniform-listing_amenity_ids_4">
  <span>
    <input class="check_boxes optional" id="listing_amenity_ids_4" name="listing[amenity_ids][]" type="checkbox" value="4" style="opacity: 0;">
  </span>
</div>

它在div.checker span上设置了css规则：

div.checker span {
  background-image: url(../img/sprite.png);
}

缺少该图像，因此输入似乎不可见。

Answer 2

实际上你的问题有复选框但由于边缘属性

而隐藏了它

input[type="checkbox"] {
    float: left;
    #margin-left: -20px;
}

所以删除或更改边距大小

见下文，FF与萤火虫

Answer 3

$('input[type="checkbox"]').css("visibility","visible");