Question

我遇到了jQuery Mobile网站的问题。我正在开发一个带有可折叠列表（http://dev.sreejesh.in/jqmobile/inbox.html）的jQuery移动网站。

我的客户端需要在标题内有一个复选框，以便用户可以检查列表而不打开它。我试着将它放在里面，但效果不好。出现复选框，但不可点击。我在谷歌搜索了很多，但找不到解决方案。希望你们能帮助我。请.....

Answer 1

这应该有效。如果您有多个ID，请确保为复选框指定唯一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>

在jquery mobile中为可折叠列表标题添加复选框

1 个答案: