在jQuery Mobile的可折疊列表頭中添加復選框

Question

我在jQuery Mobile網站上遇到問題。 我正在使用可折疊列表（ http://dev.sreejesh.in/jqmobile/inbox.html ）的jQuery移動網站。

我的客戶需要在標題內有一個復選框，以便用戶可以檢查列表而無需打開它。 我試圖將其放入內部，但效果不佳。 復選框出現，但不可單擊。 我在Google中搜索了很多，但找不到解決方案。 希望你們能幫助我。 請.....

Answer 1

這應該工作。 如果您有多個，請確保為復選框提供唯一的ID。 也不要忘記復選框標簽。

<div id="collapsibleSetWrapper" data-role="collapsible-set">
    <div data-role="collapsible" data-collapsed="true">
        <h3>
           <span>some title</span>
           <input class="mycheckbox" type="checkbox" id="uniqueID"/>
           <label for="uniqueID">&nbsp;</label>
        </h3>
        <div id="mycontent">
              <p>this is the content</p>
        </div>
    </div>
</div>

<script>    
$('#collapsibleSetWrapper .mycheckbox').checkboxradio({
    create: function(event,ui){
        var checkbox = $(event.target);
        var clickTarget = $(event.target).parent();
        $(clickTarget).click(function(e){
            if($(checkbox).is(':checked')){
                $(checkbox).attr("checked",false).checkboxradio("refresh");
                // select all the nested checkboxes here
            }
            else{
                $(checkbox).attr("checked",true).checkboxradio("refresh");
                // unselect all the nested checkboxes here
            }
            e.preventDefault();
            return false;
        });
    }
})
</script>