防止在分页的 jquery 数据表中选择多个单选按钮答案

【问题标题】：Prevent multiple radio button selections in paginated jquery Datatables防止在分页的 jquery 数据表中选择多个单选按钮
【发布时间】：2014-02-14 11:41:28
【问题描述】：

我在 Html 中使用带有分页的 Jquery 数据表。单选按钮在单页中工作正常，但是当它指向多个页面时，它无法防止单选按钮的多项选择，即如果我在第 1 页中选择一个单选按钮，在第 2 页中选择另一个单选按钮，那么两者都是仅在选定模式下。单选按钮以单选而闻名，但在这里我得到了不同的行为

【问题讨论】：

标签： jquery html jquery-datatables

【解决方案1】：

我和你有同样的问题。我找到了一个解决这个问题的方法。请在下面的完整示例中找到代码详细信息。

<html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<style>
table.dataTable tbody>tr.selected,
table.dataTable tbody>tr>.selected {
  background-color: #A2D3F6;
}
</style>
</head>
<body>    
<table id="example">
    <thead>
        <tr>
            <th>Location </th>
            <th>Base Location </th>
        </tr>
    </thead>

    <tbody>
        <tr><td>Pune</td><td><input type="radio" name="baseLocation" value="Pune"/></td></tr>
        <tr><td>Mumbai</td><td><input type="radio" name="baseLocation" value="Mumbai"/></td></tr>
        <tr><td>Dubai</td><td><input type="radio" name="baseLocation" value="Dubai"/></td></tr>        
        <tr><td>Nashik</td><td><input type="radio" name="baseLocation" value="Nashik"/></td></tr>
        <tr><td>Delhi</td><td><input type="radio" name="baseLocation" value="Delhi"/></td></tr>
        <tr><td>Sangli</td><td><input type="radio" name="baseLocation" value="Sangli"/></td></tr>        
        <tr><td>Chennai</td><td><input type="radio" name="baseLocation" value="Chennai"/></td></tr>
        <tr><td>Panji</td><td><input type="radio" name="baseLocation" value="Panji"/></td></tr>
        <tr><td>Thane</td><td><input type="radio" name="baseLocation"value="Thane" /></td></tr>        
        <tr><td>Patna</td><td><input type="radio" name="baseLocation"value="Patna" /></td></tr>
        <tr><td>Bhopal</td><td><input type="radio" name="baseLocation " value="Bhopal"/></td></tr>
        <tr><td>ABC</td><td><input type="radio" name="baseLocation" value="ABC"/></td></tr>
        <tr><td>XYX</td><td><input type="radio" name="baseLocation" value="XYX"/></td></tr>
        <tr><td>PQR</td><td><input type="radio" name="baseLocation"/ value="PQR"></td></tr>
        <tr><td>Riaydh</td><td><input type="radio" name="baseLocation" value="Riaydh"/></td></tr>        
        <tr><td>Jeddah</td><td><input type="radio" name="baseLocation" value="Jeddah"/></td></tr>
    </tbody>
</table>
</body>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script type="text/javascript">
var lastSelectedRadio = '';
var table='';
$(document).ready(function() {
   table= $('#example').DataTable( {
        responsive: true,
        pageLength: 5,
        lengthChange: true,
        bSort: false,
        "sPaginationType": "full_numbers",
        lengthMenu: [5, 10, 15],
        "fnDrawCallback": function( oSettings ) {
            lastSelectedRadio=currentSelectedRadio();
         },
    } );
} );

$("#example input[type='radio']").on("click",function(){
         table.$("input[type='radio'][value='" + lastSelectedRadio +"']").prop('checked', false);
         lastSelectedRadio = ($(this).val() ? $(this).val() :lastSelectedRadio)
         table.$("input[type='radio'][value='" + lastSelectedRadio + "']").prop('checked', true);
    });

function currentSelectedRadio()
{
    var currentSelectedValue=lastSelectedRadio;
    $("#example input[type=radio]:checked").each(function() {
        currentSelectedValue=($(this).val() ? $(this).val() :currentSelectedValue);
    }); 
    return currentSelectedValue;
}

</script>
</html>

解释： 在上面的代码中您可以看到，我编写了一个自定义函数 currentSelectedRadio() 并从 fnDrawCallback 调用它，因为每次更改页面时都会调用 fnDrawCallback 函数。同时我们将先前选择的按钮值备份到全局变量“lastSelectedRadio”中。在单选按钮的单击事件上。我正在从全局变量 lastSelectedRadio 中取消选中先前选择的按钮的值，并将选中的属性添加到当前单选按钮。

但请记住，数据表的另一页上的元素在 DOM 中不可用。 Datatable 仅将当前页面元素添加到 DOM。那么我们如何获取所有在 datatable 中可用但在 DOM 中不可用的元素呢？是的，我们可以获取所有元素，为此我们必须使用 table.$("") 语法迭代数据表，然后才能取消选中另一个页面上的单选按钮，该页面在选择当前按钮之前被选中

【讨论】：

【解决方案2】：

我遇到了同样的问题，我在这里找到了一个帖子： http://datatables.net/forums/discussion/20484/how-to-avoid-multiple-radio-buttons-selection-when-paginating-a-table

每次切换页面时都会调用“drawCallback”函数。因此，可以将当前在页面上检查的按钮的值与在其他页面上检查的按钮的值进行比较。（您需要保存按钮的最后一个检查值。）如果它们不匹配，则只需清除当前页面上按钮的检查属性。

希望对你有帮助。

【讨论】：