如何使用jQuery Mobile在列表视图中包含复选框？

Question

我需要显示具有三个不同级别的每个用户的状态。所以我有一个所有用户的列表视图。我需要显示3个级别的状态（参与与否）。但我无法做到这一点。任何人都可以帮助我，我该如何处理以下图片？

我收到名称下面的复选框。但我需要在右上角用蓝色绘制。

代码：

 <ul data-role="listview" data-filter="true"  style="margin-right : 5px;margin-left : 5px" id="progress_list" data-filter-placeholder="Filter Names" >
<li data-icon="false"  class="listitem"><a href="#" onClick='#'>Jashwin <input type="checkbox" name="submt_photo" id="submt_photo" class="custom" checked ><input type="checkbox" name="submt_Identity" id="submt_Identity" class="custom" ><input type="checkbox" name="submt_Address" id="submt_Address" class="custom" checked ></a></li>
    </ul>

小提琴：

http://jsfiddle.net/manjunath_r/eh6o90gp/

如果有人告诉我如何为每个复选框提供不同的颜色，我们将非常感激。

Answer 1

看起来position: absolute;上的.ui-checkbox input, .ui-radio input导致它们堆叠在一起。这是一个与他们并排的版本http://jsfiddle.net/kdur163h/。

如果您可以访问实际标记 - 您可以调整它以便移动输入。 http://jsfiddle.net/9dygszh4/（在span中包含用户名称以将其浮动到左侧，因为浮动输入会颠倒顺序。）

Answer 2

如果您希望复选框具有jQM外观，您可以执行以下操作：

  

DEMO 显示两个选项

对于控制组外观

<ul data-role="listview" data-filter="true" id="progress_list" data-filter-placeholder="Filter Names" class="has-right-radio">
    <li data-icon="false" class="listitem"> 
        <a href="#" onClick='#' class="ui-btn">Jashwin</a>
        <div data-role="controlgroup" data-type="horizontal" data-mini="true" class="right-radio">
            <label><input type="checkbox" name="submt_photo" id="submt_photo" class="custom" checked /> A</label>
            <label><input type="checkbox" name="submt_Identity" id="submt_Identity" class="custom" />B</label>
            <label><input type="checkbox" name="submt_Address" id="submt_Address" class="custom" checked />C</label>
        </div>
    </li>
</ul>

.has-right-radio a {
    padding-right: 124px !important;
}
.right-radio {
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 0px;
    width: 112px;
}
.right-radio .ui-checkbox input {
    visibility: hidden;
}

如果您更喜欢单独的复选框而不是切换按钮：

<ul data-role="listview" data-filter="true" id="progress_list2" data-filter-placeholder="Filter Names" class="has-right-radio">
    <li data-icon="false" class="listitem"> 
        <a href="#" onClick='#' class="ui-btn">Jashwin</a>
        <div  class="right-radio">
            <label><input type="checkbox" name="submt_photo" id="submt_photo" class="custom" checked />&nbsp;</label>
            <label><input type="checkbox" name="submt_Identity" id="submt_Identity" class="custom" />&nbsp;</label>               
            <label><input type="checkbox" name="submt_Address" id="submt_Address" class="custom" checked />&nbsp;</label>
        </div>
    </li>
</ul>

#progress_list2 .has-right-radio a {
    padding-right: 132px !important;
}
#progress_list2 .right-radio {
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 0px;
    width: 120px;
    border: 1px solid rgb(204, 204, 204);
}

#progress_list2 .right-radio .ui-checkbox {
    display: inline;
    float: left;
    padding: 0;
    margin: 0;
}
#progress_list2 .right-radio .ui-checkbox label {
    padding-right: 0;
    padding-left: 36px;
    border:0;
    border-radius: 0;
}