jquery mobile split list reassign a split button to be a checkbox

Question

Is it possible to set a checkbox instead of a split button in a split-button-list in jquery-mobile?? It seems to be easy to change it to be another button, but checkbox..

I want my checkbox to appear on a RIGHT side INSTEAD of a split button, not instead of a picture

Thanks for help..

Answer 1

Here is a DEMO FIDDLE

The UL does not use split icon, but instead an absolutely positioned DIV on the right with a checkbox inside. The CSS is used to position everything correctly:

<ul class="has-right-radio" data-role="listview" data-inset="true">
    <li data-icon="false"> 
        <a href="#">
             <img src="http://view.jquerymobile.com/1.3.0/docs/_assets/img/album-p.jpg" />
             <h3>Picture</h3>
             <p>List item with thumbnail and right radio</p>
        </a>

        <div class="right-radio">
            <input type="checkbox" name="checkbox-1a" id="checkbox-1a" checked="" />
            <label for="checkbox-1a"></label>
        </div>
    </li>
</ul>

.has-right-radio .ui-link-inherit {
    margin-right: 48px !important;
}
.right-radio {
    position: absolute;
    top: 0px; bottom: 0px; right: 0px;
    width: 48px;
    border-left: 1px solid rgb(204, 204, 204);
}
.right-radio .ui-checkbox input {
    visibility: hidden;
}
.right-radio .ui-checkbox, .right-radio .ui-checkbox label {
    position: absolute;
    top: 0px; bottom: 0px; right: 0px; left: 0px;
}
.right-radio .ui-checkbox label {
    background-image: none;
    background-color: transparent;
    border: 0;
}
.right-radio .ui-checkbox label .ui-btn-inner {
    position: absolute;
    top: 50%;
    margin-top: -10px;
}

If you do not need the thumbnail, just leave out the IMG tag like the second LI in the fiddle.