Check/uncheck checkbox --> disable other checkboxes

by Seabiscuito

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div data-bind="foreach: products" class="row">
  <div class="col-sm-12 col-md-6 col-lg-3 g-mb-20">
    <div class="row extraProduct" style="height:100%;" data-bind="click: toggle.bind($data), css: { 'extraProduct-active': isChecked(), 'disabledDiv': !enabled()}">
      <input hidden type="checkbox" data-bind="checked: isChecked" />
      <div class="col-7 g-pa-0">
        <p data-bind="text: name"></p>
        <p>Price</p>

        <a class="BekijkProduct  g-font-size-11 text-uppercase" data-modal-effect="fadein">More details</a>
      </div>
    </div>
  </div>
</div>

CSS

.extraProduct-active {
  background-color: #e5750c !important;
  color: white !important;
}

.disabledDiv {
  pointer-events: none;
  opacity: 0.4;
  cursor: not-allowed !important;
}

JavaScript

var initialData = [{
    name: "Digitale brochure",
    price: 24.95
  },
  {
    name: 'Te-koop raambord',
    price: 24.95
  },
  {
    name: 'Te-huur raambord',
    price: 24.95
  },
  {
    name: 'Funda Toppositie',
    price: 24.95
  },
  {
    name: 'Funda In beeld',
    price: 24.95
  }
];

function Cart(products) {
  this.products = products.map(Product.fromData);

  //Indexes
  var indexDB = products.findIndex(i => i.name === 'Digitale brochure');
  var indexTKRB = products.findIndex(i => i.name === 'Te-koop raambord');
  var indexTHRB = products.findIndex(i => i.name === 'Te-huur raambord');
  var indexFT = products.findIndex(i => i.name === 'Funda Toppositie');
  var indexFIB = products.findIndex(i => i.name === 'Funda In beeld');

  //Dependency 1
  selectDB = this.products[indexDB];
  disableTKRB = this.products.slice(indexTKRB, indexTKRB + 1);
  disableFT = this.products.slice(indexFT, indexFT + 1);

  selectDB.isChecked.subscribe((included) => {
    const action = included ? Product.disable : Product.enable;
    disableTKRB.forEach(action);
    disableFT.forEach(action);
  });

  //Dependency 2
  selectFT = this.products[indexFT];
  disableDB = this.products.slice(indexDB, indexDB + 1);
  disableTKRB = this.products.slice(indexTKRB, indexTKRB + 1);

  selectFT.isChecked.subscribe((included) => {
    const action = included ? Product.disable : Product.enable;
    disableDB.forEach(action);
    disableTKRB.forEach(action);
  });

};

function Product(name) {
  this.name = name;
  this.isChecked = ko.observable(false);
  this.enabled = ko.observable(true);
};

Product.prototype.toggle = function() {
  if (!this.enabled()) return;
  this.isChecked(!this.isChecked());
};

Product.prototype.enable = function() {
  this.enabled(true);
};

Product.prototype.disable = function() {
  this.enabled(false);
  this.isChecked(false);
};

Product.enable = p => p.enable();
Product.disable = p => p.disable();
Product.fromData = name => new...