在数据表中检查至少一行后如何启用按钮？

Question

在这个测试代码中，我有一个按钮，如果没有复选框被选中，我想禁用它，如果至少有一个复选框被选中，我想启用它。

执行此操作的函数有效，但不适用于数据表。我试图让它在数据表上工作。但它不适合我

这不是我的代码...这只是为了测试。

$(document).ready(function() {
  var dataTable = $('#example').dataTable({
    columnDefs: [{
        orderable: false,
        className: 'select-checkbox',
        targets: 0
      },
      {
        "visible": false,
        "searchable": false,
      }
    ],
    select: {
      style: 'multi',
      selector: 'td:first-child'
    },
    order: [
      [1, 'asc']
    ]
  })

  var checkBoxes = $('.select-checkbox');
  checkBoxes.change(function() {
    $('#btnSelectedRows').prop('disabled', checkBoxes.filter(':checked').length < 1);
  });
  $('.select-checkbox').change();

});


<
/script>

<!DOCTYPE html>
<html>

<head>


  <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
  <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css">
  <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
  <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">
  <link href='http://codeseven.github.io/toastr/build/toastr.min.css' rel='stylesheet' type="text/css">
  <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.22/datatables.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
  <script src="js/bootstrap.min.js"></script>


</head>

<body>


  <button id="btnSelectedRows" name="btnSelectedRows" data-target="#grnModal" data-toggle="modal" class="btn btn-success btn-s">
                click
                </button>
  <table class="dataTable" id="example">
    <thead>
      <tr>
        <th></th>
        <th>Rendering engine</th>
        <th>Browser</th>
        <th>Platform(s)</th>
        <th>Engine version</th>
        <th>CSS grade</th>
      </tr>
    </thead>
    <tbody>


      <tr>

        <td></td>
        <td>Misc</td>
        <td>Dillo 0.8</td>
        <td>Embedded devices</td>
        <td>-</td>
        <td>X</td>
      </tr>
      <tr>
        <td></td>
        <td>Misc</td>
        <td>Links</td>
        <td>Text only</td>
        <td>-</td>
        <td>X</td>
      </tr>
      <tr>
        <td></td>
        <td>Misc</td>
        <td>Lynx</td>
        <td>Text only</td>
        <td>-</td>
        <td>X</td>
      </tr>
      <tr>
        <td></td>
        <td>Misc</td>
        <td>IE Mobile</td>
        <td>Windows Mobile 6</td>
        <td>-</td>
        <td>C</td>
      </tr>
      <tr>
        <td></td>
        <td>Misc</td>
        <td>PSP browser</td>
        <td>PSP</td>
        <td>-</td>
        <td>C</td>
      </tr>
      <tr>
        <td></td>
        <td>Other browsers</td>
        <td>All others</td>
        <td>-</td>
        <td>-</td>
        <td>U</td>
      </tr>
    </tbody>
  </table>

Answer 1

向 table 添加委托事件侦听器，侦听更改并检查是否选中了任何复选框

var table = $("#example");
var btn = $('#btnSelectedRows');

function enableBtn() {
  btn.prop("disabled", table.find("input:checked").length === 0)
}

table.on("change", "input", enableBtn);
enableBtn();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="btnSelectedRows">Test</button>

<table id="example">
  <tbody>
    <tr>
      <td><input type="checkbox" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" /></td>
    </tr>
  </tbody>
</table>

DataTables也有选择事件

table.on( 'deselect', function ( e, dt, type, indexes ) { console.log(indexes);});
table.on( 'select', function ( e, dt, type, indexes ) {console.log(indexes);});

Answer 2

在文档中准备加载数据表而不放置任何条件，在数据表之后你可以放置这些代码行

if($(document).find("input[type='checkbox']").is(':checked').length === 0)
{
  $('#btn').prop("disabled", true);
}

在数据表中检查至少一行后如何启用按钮？

How to enable button after at least one row has been checked in Datatables?

javascript

checkbox

jquery