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 [{
      car: "Mercedes A 160",
      year: 2012,
      color: 'blue lagoon',
      cleared: false
    }, {
      car: "Citroen C4 Coupe",
      year: 2013,
      color: 'lipstick red',
      cleared: false
    }, {
      car: "Audi A4 Avant",
      year: 2014,
      color: 'lipstick red',
      cleared: true
    }, {
      car: "Opel Astra",
      year: 2015,
      color: 'black velvet',
      cleared: false
    }, {
      car: "BMW 320i Coupe",
      year: 2016,
      color: 'spring green',
      cleared: true
    }, {
      car: "Skoda Octavia",
      year: 2014,
      color: 'bright light',
      cleared: false
    }, {
      car: "Hyundai Coupe",
      year: 2016,
      color: 'bright light',
      cleared: false
    }, {
      car: "Peugeot 407",
      year: 2015,
      color: 'black velvet',
      cleared: false
    }];
  }

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

  hot1 = new Handsontable.Core(example1, {
    data: getCarData(),
    colHeaders: ['Car Model', 'Year of production', 'Color', 'Clear action'],
    stretchH: 'all',
    fillHandle: false,
    columns: [{
      data: 'car',
    }, {
      data: 'year',
    }, {
      data: 'color',
      type: 'dropdown',
      source: ['lipstick red', 'blue lagoon', 'black velvet', 'bright light', 'spring green'],
      className: 'color',
    }, {
      data: 'cleared',
      type: 'checkbox',
    }]
  });

  hot1.addHook('beforeChange', function(changes, source) {
    if (source === 'loadData' || source === 'internal' || changes.length > 1) {
    	return;
    }
    var row = changes[0][0];
    var prop = changes[0][1];
    var value = changes[0][3];
    
		if (prop === 'cleared') {
    	if (value) {
        for (var column = 0; column < this.countCols(); column++) {
          if (this.colToProp(column) !== 'cleared' && this.colToProp(column) !== 'car') {
            this.setDataAtCell(row,...