在JQM复选框组内隐藏复选框

我有一个复选框，我希望它们最初是隐藏的，我使用css实现的控制组，在运行时我想在某个时间显示这些复选框，但仅限于控件我指定的组是因为页面上有很多这样的组。在JQM复选框组内隐藏复选框

我遇到的问题是选择可视复选框，因为它被渲染为“:: after”文本，我不知道如何使用JQuery进行选择。

<div data-role="controlgroup" id="test-list"> 
    <label for="id1"> 
     <a href="#" onclick="alert('The list item has been clicked.'); event.stopPropagation(); return false;"> 
     <h2>Title</h2> 
     <p>Description Text</p> 
    </a> 
    </label> 
    <input type="checkbox" id="id1" /> 
</div>

会呈现：

<div class="ui-checkbox"> 
    <label for="id1" class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off ui-first-child"> 
     <a href="#" onclick="alert('Clicked'); event.stopPropagation(); return false;" class=" ui-link"> 
     <h2>Title</h2> 
     <p>Description</p> 
     </a> 
     ::after <!-- This is what renders as the checkbox --> 
    </label> 
    <input type="checkbox" id="id1" name="p1"> 
</div>

我尝试了一些技巧，但不能选择“::之后”这是什么吸引列表中的复选框。

$("#test-list label").first().next() 
$("#test-list label").children().eq(0).next()

页面加载时将其隐藏的CSS：

.ui-btn.ui-checkbox-off:after, .ui-btn.ui-checkbox-on:after 
{ 
    visibility: hidden; 
}

来源

2014-04-11 paul-2011

jQuery的不能访问诸如:after伪元素，因为他们是不是真的在DOM。您可以通过添加和删除隐藏:after元素的类来获得所需内容。首先创建一个新的CSS类：

.hiddenCheck:after { 
    display: none !important; 
}

然后，它适用于JQM创建的复选框<label>：

$("#id1").parents(".ui-checkbox").find("label").toggleClass("hiddenCheck");

注：不同的选择可以让你有（例如最近（）等。）。

DEMO

单击该按钮可隐藏/显示复选框...

来源

2014-04-11 20:30:54 ezanker

好极了！可惜这些复选框在我的一些手机测试过程中表现不好，所以我的猜测是这不是一个好的移动设计，我可能会尝试使用“多选”列表项而不是复选框获得类似的效果，但这是如果我无法正常工作，可以在另一个线程中使用。非常感谢！ –

呦欢迎。 – ezanker

在JQM复选框组内隐藏复选框

回答

相关问题