在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複選框組內隱藏複選框

回答

相關問題