隐藏标签

Question

我想禁用或隐藏“分组”内容 <label>标记，但不影响嵌套的<input>代码。

<label class="" for="officersheet_fields_attributes_3_grouping">
<input type="checkbox" id="officersheet_fields_attributes_3_grouping" name="officersheet[fields_attributes][3][grouping]" value="1">
Grouping
</label>`

我在rails中使用formtastic。 formtastic代码片段 <td><%= f.input :grouping %></td>

以上行生成上面的html。

提前致谢

Answer 1

您可以使用text-indent: -1000em。

label
{
    text-indent: -1000em;
}

但我不认为在标签内输入是个好主意。最好有以下：

<input type="checkbox"/><label>Grouping</label>

Answer 2

在标签文字周围添加span标记并将其隐藏

<label for="foo">
    <input type="checkbox" value="1"><span>Grouping</span>
</label>

CSS

span{
    display:none 
}

<强> DEMO

Answer 3

我也会选择跨度，但是如果你对你的html结构无法控制，你可以这样做：

$(document).ready(function () {
    $('label')
      .contents() 
      .each(function() { 
          // if (this.nodeType == Node.TEXT_NODE);  this works unless using IE 7
          if (this.nodeType === 3) {
              $(this).remove();
          }
      });
});