Jquery mobile 中在列表项上使用单选按钮

 

无意中发现可以在li上实现开关按钮

http://jsfiddle.net/Gajotres/pzfr2/

 

 

 

 

 

 

 

 

触类旁通，终于实现了在li上增加单选按钮组

 

1. @model QGateMobile.Areas.WG32.Models.SystemConfigModel
2. @{
3.     ViewBag.Title = "系统配置";
4. }
5. @section Header {
6.     @Html.ActionLink("后退", "Index", "Home", null, new { data_icon = "arrow-l", data_rel = "back" })
7.     <h1>@ViewBag.Title</h1>
8. }
9.  
10. <style type="text/css">
11.     #raido-container {
12.         position: relative;
13.         float: right;
14.         margin-top: -10px !important;
15.     }
16.  
17.         #raido-container .ui-slider {
18.             margin-top: -50px !important;
19.         }
20. </style>
21.  
22.  
23.  
24. <p>
25.     在此完成系统配置
26. </p>
27. <ul data-role="listview" data-inset="true" style="list-style-type: none;">
28.     <li>@Ajax.ActionLink("数据库更新", "UpdateDB", "Home", new AjaxOptions())</li>
29. </ul>
30. <ul data-role="listview" data-inset="true" style="list-style-type: none;">
31.     <li data-role="list-divider">反潜回设置</li>
32.  
33.     <li data-role="fieldcontain">
34.         <p>
35.             反潜(同一控制器上多门反潜）
36.         </p>
37.         <p>
38.             网段(同网段多控制器共享反潜)
39.         </p>
40.         <p>
41.             区域(同区域多控制器共享反潜)
42.         </p>
43.         @{
44.             string[] ss = new string[4];
45.             if (Model.AntiBack == 0)
46.             {
47.                 ss[0] = "checked=\"checked\"";
48.             }
49.             ss[Model.AntiBackBroadcast] = "checked=\"checked\"";
50.         }
51.         <div data-role="controlgroup" data-type="horizontal">
52.             <input type="radio" name="antiback" id="antibackRadio1" value="0" @Html.Raw(ss[0]) />
53.             <label for="antibackRadio1">禁用</label>
54.             <input type="radio" name="antiback" id="antibackRadio2" value="1" @Html.Raw(ss[1]) />
55.             <label for="antibackRadio2">反潜</label>
56.             <input type="radio" name="antiback" id="antibackRadio3" value="2" @Html.Raw(ss[2]) />
57.             <label for="antibackRadio3">网段</label>
58.             <input type="radio" name="antiback" id="antibackRadio4" value="3" @Html.Raw(ss[3]) />
59.             <label for="antibackRadio4">区域</label>
60.         </div>
61.         @*<input type="checkbox" data-role="flipswitch" name="anti" id="anti" checked="">*@
62.     </li>
63. </ul>
64. @Scripts.Render("~/bundles/anti")