asked on

Enable Submit Button When At Least 1 Row is Selected on DataTable

Hello Experts!

I need help on the following.

My DataTable has a column with checkbox (meaning that each row has a checkbox associated with it). I have disabled the Submit button. I want it enabled only when at least 1 row is selected. I am able to toggle between enable/disable when I select/deselect a checkbox. But in a situation where more than 1 checkboxes are already selected and some are subsequently deselected, I still want it enabled as long as 1 row is checked.

If the above is unnecessary, would you rather show me how to check for empty array[ ] using JavaScript/jQuery at client side?

Here is my code:
name of the checkbox:

name="studentSelect[' + row.Student_ID + ']"

Open in new window

id of the Submit button:

add_enrollment

Open in new window

Currently, I use this to enable it:

myTable.on( 'select', function ( e, dt, type, index ) {
	if ( type === 'row' ) {
	   $( myTable.row( index ).node() ).find('input:checkbox').prop('checked', true);
	   $('#add_enrollment').removeAttr('disabled');
	}
});

Open in new window

And this to disable it:

//select/deselect all rows according to table header checkbox
$('#enrollmentTable > thead > tr > th input[type=checkbox]').eq(0).on('click', function(){
	var th_checked = this.checked;//checkbox inside "TH" table header
	$('#enrollmentTable').find('tbody > tr').each(function(){
	var row = this;
	if(th_checked){
	     myTable.row(row).select();
	}
	else  {
	    myTable.row(row).deselect();
	    $('#add_enrollment').attr('disabled','true');
	}
});
});

Open in new window

ASKER CERTIFIED SOLUTION

Zakaria Acharki

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Opeyemi AbdulRasheed

ASKER

Thank you so much.
Using your code, I ended up with

myTable.on( 'select', function ( e, dt, type, index ) {
	if ( type === 'row' ) {
		$( myTable.row( index ).node() ).find('input:checkbox').prop('checked', true);
		if ($('#enrollmentTable input[type=checkbox]:checked').length === 0){
			$('#add_enrollment').attr('disabled','true');
			$('#add_enrollment').css('cursor','not-allowed');
		}
	else {
		$('#add_enrollment').removeAttr('disabled');
		$('#add_enrollment').css('cursor','pointer');
		}
	}
});

myTable.on( 'deselect', function ( e, dt, type, index ) {
	if ( type === 'row' ) {
		$( myTable.row( index ).node() ).find('input:checkbox').prop('checked', false);
		if ($('#enrollmentTable input[type=checkbox]:checked').length === 0){
			$('#add_enrollment').attr('disabled','true');
			$('#add_enrollment').css('cursor','not-allowed');
		}
	else {
		$('#add_enrollment').removeAttr('disabled');
		$('#add_enrollment').css('cursor','pointer');
		}
	}
});

Open in new window

Zakaria Acharki

Good job I will suggest the use of a global function to avoid the duplication :

myTable.on( 'select', function ( e, dt, type, index ) {
	handleSelection(true, e, dt, type, index);
});

myTable.on( 'deselect', function ( e, dt, type, index ) {
	handleSelection(false, e, dt, type, index);
});

function handleSelection(checked, e, dt, type, index){
	if ( type === 'row' ) {
		$( myTable.row( index ).node() ).find('input:checkbox').prop('checked', checked);
		
		if ($('#enrollmentTable input[type=checkbox]:checked').length === 0){
			$('#add_enrollment').attr('disabled','true');
			$('#add_enrollment').css('cursor','not-allowed');
		}
	else {
		$('#add_enrollment').removeAttr('disabled');
		$('#add_enrollment').css('cursor','pointer');
		}
	}
}

Open in new window

Opeyemi AbdulRasheed

ASKER

Superb! Very clean and handy. I've adopted it. Working as expected. Million thanks

Zakaria Acharki

You're welcome anytime @AbdulRasheed glad I could help.