JSFiddle - React, Tailwind, and code Playground

how to disable the checkboxes with the numbers that available on the array

by Akram kamal

HTML

<table class="bus-table">

</table>

CSS

.taken{ color:red}

JavaScript

var row = Array(),
    booked = Array(),
    i = 0,
    j = 0;

row = [
    ['1', '5', '9', '13', '17', '21', '25', '29', '33', '37', '41', '45', '49'],
    ['2', '6', '10', '14', '18', '22', '26', '30', '34', '38', '42', '46', '50'],
    ['', '', '', '', '', '', '', '', '', '', '', '', '51'],
    ['3', '7', '11', '15', '19', '23', '27', '31', '35', '39', '43', '47', '52'],
    ['4', '8', '12', '16', '20', '24', '28', '32', '36', '40', '44', '48', '53']
];

$.each(row, function(index, value) {
    $('.bus-table').append('<tr>');
    while (j < index + 1) {
        for (i = 0; i < value.length; i++) {
            if (row[j][i] !== ' ') {
                $('.bus-table tr:nth-child(' + (index + 1) + ')').append(
                    '<td seatno="' + row[j][i] + '">' + row[j][i] + '<input type="checkbox"/></td>');
            } else {
                $('.bus-table tr:nth-child(' + (index + 1) + ')').append('<td></td>');
            }
        }
        j++;
    }
});
booked = ['24', '48', '51'];
$.each(booked, function(i, seatNo) {
    $("[seatno=" + seatNo + "]").addClass("taken").children().prop("disabled", true)
})