Question

我有一个动态数据网格（Datatables），最初显示10行，一列中有复选框。表格底部有一个按钮，当选中至少一个框时将启用该按钮。现在，当我单击一个复选框并在网格中显示接下来的10条记录并返回到先前的记录时，该按钮被禁用。

<div class="table-responsive datagrid">




<table cellpadding="0" cellspacing="0" border="0" class="table voa-grid" id="example">
<thead class="thead">
    <tr>

        <th>Given Names</th>
        <th>Family Name</th>
        <th>gender</th>
        <th>Nationality</th>
        <th>Date of Birth</th>
        <th>Travel Doc No</th>
        <th>TD Issuing State</th>
        <th>Passport Issue Date</th>
        <th>Payment Transaction No</th>
        <th>Visa Application No</th>
        <th>Visa Issued</th>
        <th>Visa Issue Date</th>
    </tr>
</thead>
<tbody>
    <tr class="gradeX">
        <td>Steven</td>
        <td>Gerrard</td>
        <td>Male</td>
        <td class="center">British</td>
        <td>04 Feb 2006</td>
        <td>C90838383</td>
        <td>England</td>
        <td>04 Feb 2006</td>
        <td>PAY1001</td>
        <td>VA1001</td>
        <td><input type="checkbox" value="" name=""></td>
        <td></td>
    </tr>
    <tr class="gradeX">
        <td>Fernando</td>
        <td>Torres</td>
        <td>Male</td>
        <td class="center">Spanish</td>
        <td>04 Feb 2006</td>
        <td>D90</td>
        <td>Spain</td>
        <td>04 Feb 2006</td>
        <td>PAY1002</td>
        <td>VA1001</td>
        <td><input type="checkbox" value="" name=""></td>
        <td></td>
    </tr>
    <tr class="gradeX">
        <td>Lukas</td>
        <td>Poldoski</td>
        <td>Male</td>
        <td class="center">German</td>
        <td>04 Feb 2006</td>
        <td>B9083</td>
        <td>Germany</td>
        <td>04 Feb 2006</td>
        <td>PAY1003</td>
        <td>VA1006</td>
        <td><input type="checkbox" value="" name=""></td>
        <td></td>
    </tr>
    <tr class="gradeX">
        <td>Zlatan</td>
        <td>Ibrahimovic</td>
        <td>Male</td>
        <td class="center">Swedish</td>
        <td>04 Feb 2006</td>
        <td>D90838383</td>
        <td>Sweden</td>
        <td>04 Feb 2006</td>
        <td>PAY1001</td>
        <td>VA1008</td>
        <td><input type="checkbox" value="" name=""></td>
<td></td>
    </tr>
    <tr class="gradeX">
        <td>Robin</td>
        <td>Van Persie</td>
        <td>Male</td>
        <td class="center">Dutch</td>
        <td>04 Feb 2006</td>
        <td>A90838383</td>
        <td>Netherlands</td>
        <td>04 Feb 2006</td>
        <td>PAY1001</td>
        <td>VA1002</td>
        <td><input type="checkbox" value="" name=""></td>
     <td></td>
    </tr>

    <tr class="gradeX">
        <td>Xabi</td>
        <td>Alonso</td>
        <td>Male</td>
        <td class="center">Spanish</td>
        <td>04 Feb 2006</td>
        <td>C90838383</td>
        <td>Spain</td>
        <td>04 Feb 2006</td>
        <td>PAY1001</td>
        <td>VA1005</td>
        <td><input type="checkbox" value="" name=""></td>
        <td></td>
    </tr>



    <tr class="gradeX">
        <td>Xabi</td>
        <td>Alonso</td>
        <td>Male</td>
        <td class="center">Spanish</td>
        <td>04 Feb 2006</td>
        <td>C90838383</td>
        <td>Spain</td>
        <td>04 Feb 2006</td>
        <td>PAY1001</td>
        <td>VA1005</td>
        <td><input type="checkbox" value="" name=""></td>
        <td></td>
    </tr>



    <tr class="gradeX">
        <td>Xabi</td>
        <td>Alonso</td>
        <td>Male</td>
        <td class="center">Spanish</td>
        <td>04 Feb 2006</td>
        <td>C90838383</td>
        <td>Spain</td>
        <td>04 Feb 2006</td>
        <td>PAY1001</td>
        <td>VA1005</td>
        <td><input type="checkbox" value="" name=""></td>
        <td></td>
    </tr>



    <tr class="gradeX">
        <td>Xabi</td>
        <td>Alonso</td>
        <td>Male</td>
        <td class="center">Spanish</td>
        <td>04 Feb 2006</td>
        <td>C90838383</td>
        <td>Spain</td>
        <td>04 Feb 2006</td>
        <td>PAY1001</td>
        <td>VA1005</td>
        <td><input type="checkbox" value="" name=""></td>
        <td></td>
    </tr>



    <tr class="gradeX">
        <td>Xabi</td>
        <td>Alonso</td>
        <td>Male</td>
        <td class="center">Spanish</td>
        <td>04 Feb 2006</td>
        <td>C90838383</td>
        <td>Spain</td>
        <td>04 Feb 2006</td>
        <td>PAY1001</td>
        <td>VA1005</td>
        <td><input type="checkbox" value="" name=""></td>
        <td></td>
    </tr>



    <tr class="gradeX">
        <td>Xabi</td>
        <td>Alonso</td>
        <td>Male</td>
        <td class="center">Spanish</td>
        <td>04 Feb 2006</td>
        <td>C90838383</td>
        <td>Spain</td>
        <td>04 Feb 2006</td>
        <td>PAY1001</td>
        <td>VA1005</td>
        <td><input type="checkbox" value="" name=""></td>
        <td></td>
    </tr>



    <tr class="gradeX">
        <td>Xabi</td>
        <td>Alonso</td>
        <td>Male</td>
        <td class="center">Spanish</td>
        <td>04 Feb 2006</td>
        <td>C90838383</td>
        <td>Spain</td>
        <td>04 Feb 2006</td>
        <td>PAY1001</td>
        <td>VA1005</td>
        <td><input type="checkbox" value="" name=""></td>
        <td></td>
    </tr>



    <tr class="gradeX">
        <td>Xabi</td>
        <td>Alonso</td>
        <td>Male</td>
        <td class="center">Spanish</td>
        <td>04 Feb 2006</td>
        <td>C90838383</td>
        <td>Spain</td>
        <td>04 Feb 2006</td>
        <td>PAY1001</td>
        <td>VA1005</td>
        <td><input type="checkbox" value="" name=""></td>
        <td></td>
    </tr>



    <tr class="gradeX">
        <td>Xabi</td>
        <td>Alonso</td>
        <td>Male</td>
        <td class="center">Spanish</td>
        <td>04 Feb 2006</td>
        <td>C90838383</td>
        <td>Spain</td>
        <td>04 Feb 2006</td>
        <td>PAY1001</td>
        <td>VA1005</td>
        <td><input type="checkbox" value="" name=""></td>
        <td></td>
    </tr>



    <tr class="gradeX">
        <td>Xabi</td>
        <td>Alonso</td>
        <td>Male</td>
        <td class="center">Spanish</td>
        <td>04 Feb 2006</td>
        <td>C90838383</td>
        <td>Spain</td>
        <td>04 Feb 2006</td>
        <td>PAY1001</td>
        <td>VA1005</td>
        <td><input type="checkbox" value="" name=""></td>
        <td></td>
    </tr>












</tbody>
<tfoot>

</tfoot>
</table>



</div>











  $(".voa-grid").delegate("input[type='checkbox']","click", function(){

      $(this).each(function(index, element) {

            if($(this).prop("checked") == true){
                $(this).addClass( "voa-tr-checked" );
                $(this).attr('checked', 'checked');
                var vor_checked_one = $(".voa-grid").find(".voa-tr-   checked").size();

                if(vor_checked_one > 0){
                $(".update").prop("disabled", false);
                }
            }

            else if($(this).prop("checked") == false){
                $(this).removeClass( "voa-tr-checked" );
                $(this).removeAttr('checked');
                var vor_checked_two = $(".voa-grid").find(".voa-tr-checked").size();

                if(vor_checked_two == 0){
                $(".update").prop("disabled", true);
                }
            }  
        });

  });

});

Answer 1

我假设你正在使用Datatables.net

如果是这样，您需要使用他们的API来实现这一目标。因为html上的原始jQuery使用不会与状态数据表有同步。数据表管理自己的状态，并使用已保存的状态和数据重新呈现表。如果你只是改变了html，数据表永远不会知道你做了什么。

您可以使用此example（没有复选框，但选择完整的行），您可以在其中选择一行，如果您更改页面，然后返回，则仍然会选中该行。

您可能会搜索tr.selected，如果存在，则会启用该按钮

Answer 2

我无法理解您的问题，但我认为底部的复选框应该检查是否有其他问题。在那种情况下，我想我可能已经找到了问题：

    else if($(this).prop("checked") == false){
            $(this).removeClass( "voa-tr-checked" );
            $(this).removeAttr('checked');

在这段代码中，只要您取消选中任何其他按钮，就会听到底部复选框被取消选中。我可能有完全错误的结束，但如果要检查底部复选框是否有任何或所有其他复选框，当其他任何一个未经检查时，肯定不应该取消选中。

希望我说的是感觉，但完全有可能我不知道我在做什么，所以如果是这样的话，请提前道歉..

选中并取消选中动态网格中的所有复选框

2 个答案: