ReadOnly row depends on "available" checkbox

by handsoncode

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css">
<script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
<div id="example1" class="hot handsontable htColumnHeaders"></div>

CSS

.handsontable td.highlightCell {
  background-color: #eee;
}

body {
  background: #fff;
  margin: 0;
  padding: 0;
}

JavaScript

document.addEventListener("DOMContentLoaded", function() {

  function getCarData() {
    return [{
      commercial: "Buy a Proto Supreme Car",
      channel: 5,
      format: '12-hour clock',
      // timestamp
      time: 145985534000
    }, {
      commercial: "Citroen C4 Coupe Commercial",
      channel: 4,
      format: '12-hour clock',
      time: 145985524000
    }, {
      commercial: "Ren a car at Joe's",
      channel: 3,
      format: '12-hour clock',
      time: 145985234000
    }, {
      commercial: "New Viada Clothing Collection",
      channel: 8,
      format: '24-hour clock',
      time: 145982534000
    }, {
      commercial: "Buy a Proto Supreme Car",
      channel: 6,
      format: '24-hour clock',
      time: 145915534000
    }, {
      commercial: "Skoda Octavia - better tomorrow",
      channel: 4,
      format: '12-hour clock',
      time: 145185534000
    }, {
      commercial: "Rick and Morty - new series",
      channel: 1,
      format: '12-hour clock',
      time: 145123534000
    }, {
      commercial: "Well Done - hire best plumber",
      channel: 2,
      format: '24-hour clock',
      time: 145934755000
    }];
  }

  var example1 = document.getElementById('example1'),
    hot1;

  hot1 = new Handsontable.Core(example1, {
    data: getCarData(),
    colHeaders: ['Commercial block', 'Channel', 'Time format', 'Air time'],
    colWidths: [250,90,200,200],
    fillHandle: false,
    columns: [{
      data: 'commercial'
    }, {data: 'channel'}, {
      data: 'format',
      type: 'dropdown',
      source: ['24-hour clock', '12-hour clock'],
      className: 'format',
    }, {
      data: 'time',
      type: 'time',
      timeFormat: 'h:mm:ss a',
      readOnly: true,
      renderer: timeRenderer
    }]
  });
  
  hot1.addHook('beforeRenderer', function(td, row, col, prop, value, cellProperties) {
  	if (prop === 'format') {
    	var cellMeta = this.getCellMeta(row, this.propToCol('time'));
	    cellMeta.timeFormat = (value ===...