ReadOnly row depends on "available" checkbox

by Camille Bechayda

HTML

<link rel="stylesheet" href="https://docs.handsontable.com/0.24.1/bower_components/handsontable/dist/handsontable.full.min.css">
<script src="https://docs.handsontable.com/0.24.1/bower_components/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
}

JavaScript

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

  function getCarData() {
    return [{
      car: "Mercedes A 160",
      year: 2012,
      color: 'blue lagoon',
      available: true
    }, {
      car: "Citroen C4 Coupe",
      year: 2013,
      color: 'lipstick red',
      available: false
    }, {
      car: "Audi A4 Avant",
      year: 2014,
      color: 'lipstick red',
      available: true
    }, {
      car: "Opel Astra",
      year: 2015,
      color: 'black velvet',
      available: true
    }, {
      car: "BMW 320i Coupe",
      year: 2016,
      color: 'spring green',
      available: true
    }, {
      car: "Skoda Octavia",
      year: 2014,
      color: 'bright light',
      available: true
    }, {
      car: "Hyundai Coupe",
      year: 2016,
      color: 'bright light',
      available: true
    }, {
      car: "Peugeot 407",
      year: 2015,
      color: 'black velvet',
      available: false
    },
{
      car: "BMW Z3",
      year: 2016,
      color: 'blue lagoon',
      available: true
    }];
  }

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

  hot1 = new Handsontable.Core(example1, {
    data: getCarData(),
    colHeaders: ['Car Model', 'Year of production', 'Color', 'Available'],
    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: 'available',
      type: 'checkbox',
    }]
  });
  
  hot1.addHook('beforeChange', function(changes, source) {
    var row = changes[0][0];
    var prop = changes[0][1];
    var value = changes[0][3];
  
    if (prop === 'available') {
    	for (var i = 0; i < this.countCols(); i++) {

      	if (this.colToProp(i) === 'available') {
        	break;
        }
        var meta = this.getCellMeta(row, i);
        
       ...