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

我需要用三个不同的级别显示每个用户的状态。所以我有一个所有用户的列表视图。我需要显示3个级别的状态（参加或不参加）。但我无法做到这一点。有人能帮我吗？我该如何做类似于下图的事情

我将在名称下面的复选框中找到。但我需要在右边的角落，我用蓝色画的

代码：

小提琴：

---

如果有人告诉我如何给每个复选框赋予不同的颜色，我将不胜感激

看起来有一个

位置：绝对

打开

.ui复选框输入，.ui无线电输入

使它们堆叠在一起。这是一个与他们并排的版本

---

如果您有权访问实际的标记，您可以像这样调整它以移动输入。（将用户名包装在

span

中，使其向左浮动，因为浮动输入会颠倒顺序。）

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

下面是显示这两个选项的

查看控制组

<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;
}

A.
B
C


.有正确的收音机吗{
右边填充：124px！重要；
}
.右收音机{
位置：绝对位置；
顶部：0px；
底部：0px；
右：0px；
宽度：112px；
}
.right radio.ui复选框输入{
可见性：隐藏；
}

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

<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;
}

#进度表2.有正确的收音机吗{
右边填充：132px！重要；
}
#进度表2.右收音机{
位置：绝对位置；
顶部：0px；
底部：0px；
右：0px；
宽度：120px；
边框：1px实心rgb（204204204）；
}
#进度列表2.右收音机.ui复选框{
显示：内联；
浮动：左；
填充：0；
保证金：0；
}
#进度列表2.右收音机.ui复选框标签{
右边填充：0；
左侧填充：36px；
边界：0；
边界半径：0；
}

看起来有一个

位置：绝对

打开

.ui复选框输入，.ui无线电输入

使它们相互堆叠。我需要相同的。但是我只能从这个链接中看到两个复选框，其中一个没有被选中，所以这个方案很难看到。可能还有一些额外的CSS样式未经检查的输入未包括在内？这个怎么样-

<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;
}