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 t开发者_开发问答he 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>
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>
You can write check all like this
jQuery(document).ready(function() {
jQuery('#selectAll').click(function() {
jQuery(tableId).find("input:checkbox").attr('checked', $(this).attr("checked"));
});
});
To find whether any checkbox is checked you can use
jQuery(tableId).find("input:checkbox:checked").length
and if it is greater than 0 then there is atleast one checkbox checked.
To hide the check all checkbox when there are no child checkboxes, you can attach a class to the child checkboxes and do something like this
$("input:checkbox.classname").length
精彩评论