Checkbox Limits in a Data Matrix

This extension limits each student to two games and each game to five students before sending an update request.

Maximum Games per Student Top ↑

const id =
    $( this ).data( "id" );

const rowCount = $(
    ':checkbox:checked[data-id="' +
    id +
    '"]'
).length;

if ( rowCount > 2 ) {
    $( this ).prop( "checked", false );
    return;
}

Maximum Members per Game Top ↑

const columnName =
    $( this ).data(
        "column-name"
    );

const columnCount = $(
    ':checkbox:checked' +
    '[data-column-name="' +
    columnName +
    '"]'
).length;

if ( columnCount > 5 ) {
    $( this ).prop( "checked", false );
    return;
}

Complete change Handler Top ↑

$( "#matrix-limit-demo" ).on(
    "change",
    ".matrix-limit-check",
    function () {
        const $box = $( this );

        if ( !$box.prop( "checked" ) ) {
            sendUpdate( $box );
            return;
        }

        const id = $box.data( "id" );
        const columnName =
            $box.data( "column-name" );

        const rowCount = $(
            ':checkbox:checked[data-id="' +
            id +
            '"]'
        ).length;

        const columnCount = $(
            ':checkbox:checked' +
            '[data-column-name="' +
            columnName +
            '"]'
        ).length;

        if ( rowCount > 2 ) {
            $box.prop( "checked", false );
            showMessage(
                "A student can join at most two games."
            );
            return;
        }

        if ( columnCount > 5 ) {
            $box.prop( "checked", false );
            showMessage(
                "A game can have at most five students."
            );
            return;
        }

        sendUpdate( $box );
    }
);

Download original restricted Data Matrix project

← Data Matrix basics · Load a record by ID

Original Source Examples Retained for Migration Reference Top ↑

Original example 1

var id=$(this).data('id');
var total_checked=  $(":checkbox:checked[data-id="+id+"]").length // reading number of games selected 
if(total_checked <3){
	// allow updating 
}

Original example 2

var column_name=$(this).data('column_name');
var total_column_checked=  $(":checkbox:checked[data-column_name="+column_name+"]").length 
if(total_column_checked <6){
// allow updating
}

Original example 3

<script>
$(document).ready(function() {
////////////////////
$('input[type="checkbox"]').change(function(){
var column_name=$(this).data('column_name');
var total_column_checked=  $(":checkbox:checked[data-column_name="+column_name+"]").length 
if(total_column_checked <6){
var id=$(this).data('id');
//var total_checked=  $("."+id+":checkbox:checked").length
var total_checked=  $(":checkbox:checked[data-id="+id+"]").length // reading number of games selected 
if(total_checked <3){
$.post( "data-matrixck.php", {"column_name":$(this).data('column_name'),"id":$(this).data('id')},function(return_data,status){
$("#msg_display").html(return_data);
});
}else{
$( this ).prop( "checked", false );	
$("#msg_display").html("You can't add more than 2 games");	
}
}else{
$( this ).prop( "checked", false );	
$("#msg_display").html("You can't add more than 5 memebers to  game");	
}

$("#msg_display").show();
setTimeout(function() { $("#msg_display").fadeOut('slow'); }, 5000);
});
//////////////////////////
////////////////
});
</script>

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: