JSFiddle - React, Tailwind, and code Playground

by jairajdesai

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="checkbox text-center">
  <table border="2">
    <tr>
      <td>Value 1</td>
      <td>
        <input id="s_fac" type="checkbox" class="sev_check">
      </td>
    </tr>
    <tr>
      <td>Value 2</td>
      <td>
        <input id="s_fac" type="checkbox" class="sev_check">
      </td>
    </tr>
    <tr>
      <td>Value 3</td>
      <td>
        <input id="s_fac" type="checkbox" class="sev_check">
      </td>
    </tr>
    <tr>
      <td>Value 4</td>
      <td>
        <input id="s_fac" type="checkbox" class="sev_check">
      </td>
    </tr>
    <tr>
      <td>Value 5</td>
      <td>
        <input id="s_fac" type="checkbox" class="sev_check">
      </td>
    </tr>
  </table>
</div>

CSS

.selected {
  opacity: 1
}

.unselected {
  opacity: 0.5
}

JavaScript

$(document).ready(function() {
  $('.sev_check').each(function() {
    $(this).addClass('unselected');
  });
  $('.sev_check').on('click', function() {
    $(this).toggleClass('unselected');
    $(this).toggleClass('selected');
    $('.sev_check').not(this).prop('checked', false);
    $('.sev_check').not(this).removeClass('selected');
    $('.sev_check').not(this).addClass('unselected');

  });
});