將複選框添加到jquery mobile中的可摺疊列表標題

Question

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

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

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>