Home/ Questions/Q 648259
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T21:48:44+00:00

I am having check box in the column header. The function of this is

  • 0

I am having check box in the column header. The function of this is to check or uncheck all the check boxes in that column.If the row check box is checked and say delete, that row can be deleted from the dataTable.

If the row object is used in some other table as a foreign key i put ‘-‘ in that row instead of check box which indicates that row cannot be deletable.

In these cases if all the row has ‘-” , there is no need to have the header check box. How to programatically hide this ‘Check All | Clear All’ check box, if there is nothing to be removed.

It would be even preferable to hide the ‘Remove’ button if there is no selection to be made.

What are the best practices to address the above scenario. I have attached the javascript which I am using.

<script type="text/javascript">
var tableId = '#user\\:userList';
jQuery(document).ready(function() {
    jQuery('#selectAll').click(function() {
        jQuery(tableId).find("input[type='checkbox']").attr('checked', jQuery('#selectAll').is(':checked'));
    });
});
</script>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Complete example:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  var tableId = "#box";
  $("#cb").click(function() {
    if ($(this).is(":checked")) {
      $(tableId).find("input:checkbox").attr("checked", "checked");
    } else {
      $(tableId).find("input:checkbox").removeAttr("checked");
    }
  });
});
</script>
</head>
<body>
<input type="checkbox" id="cb">all
<hr>
<div id="box">
<input type="checkbox">one<br>
<input type="checkbox">two<br>
<input type="checkbox">three<br>
</div>
</body>
</html>
    • 0