JSFiddle - React, Tailwind, and code Playground

by Madalina Taina

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<h1>Implementing checkbox functionality</h1>
<div class="parent">
  <h2>Parent - Functionality with css only</h2>
  <input type="checkbox" class="checkbox-t" />
  <input type="checkbox" class="checkbox-t" />
</div>

CSS

.parent input[type="checkbox"]:not(:checked) ~input[type="checkbox"] {
	pointer-events:none;
}

JavaScript

var checkboxes = $("input[type='checkbox']");
var fcheckbox = $("input[type='checkbox']:first");
var scheckbox = $("input[type='checkbox']:not(:first)");
fcheckbox.click(function() {
  scheckbox.prop('checked', false);
});