javascript - Validate checkboxes when checking the same order within the same column in jquery

Question

I have several rows of checkboxes. The scenario is that within a category (blue-box) when I click a checkbox in the first row, and when I click another checkbox in the second or third row and within the same column, the previous checked checkbox is unchecked and the new one is checked. This is working fine. My issue is that when I uncheck the newly checked checkbox, it should re-check the previous checkbox checked. Anyone who can help me with this please ?

Note that the validation of the checkboxes are independent in each category (blue-box). Also the first row of each category is always checked.

The demo is as per below.

$(".main").on('change', '.js-cars-item [type="checkbox"]', function() {
  var idx = $(this).closest('li').index(); //Get the index - Number in order
  var chk = $(this).is(":checked"); //Get if checked or not
  var obj = this; //Checkbox object

  $(this).closest('.cars').find('.js-cars-item').each(function() { //Loop every js-cars-item
    //Find the checkbox with the same index of clicked checkbox. Change disabled property
    $(this).find('li:eq(' + idx + ') [type="checkbox"]').not(obj).prop("checked", false);
  });

  var checkeds = [];
  $(this).closest(".cars").find(".cars-item input:checkbox:checked").each(function(index) {
    checkeds[index] = $(this).attr('id');
  });
  console.clear();
  console.log("These are checked:", checkeds);
})

$('.js-add-category').click(function() {

  var categoryContent = `<div class="cars">

<div class="cars-item js-cars-item">
  <ul>
    <li>
      <input type="checkbox" id="car-1-3" checked disabled>
      <label for="car-1-3"><i class="icon-tick"></i></label>
    </li>
    <li>
      <input type="checkbox" id="car-2-3" checked disabled>
      <label for="car-2-3"><i class="icon-tick"></i></label>
    </li>
    <li>
      <input type="checkbox" id="car-3-3" checked disabled>
      <label for="car-3-3"><i class="icon-tick"></i></label>
    </li>
  </ul>
</div>

<button type="button" class="js-add-section">Add Section</button>
<button type="button" class="js-save-section">Add Section</button>
</div> <br>`

  $('.main').append(categoryContent);

});


$(document.body).on('click', 'button.js-add-section', function() {
  var sectionContent = `<div class="cars-item js-cars-item">
  <ul>
    <li>
      <input type="checkbox" id="car-1-6>
      <label for="car-1-6"><i class="icon-tick"></i></label>
    </li>
      <li>
      <input type="checkbox" id="car-2-6>
      <label for="car-2-6"><i class="icon-tick"></i></label>
    </li>
      <li>
      <input type="checkbox" id="car-3-6>
      <label for="car-3-6"><i class="icon-tick"></i></label>
    </li>
  </ul> </div>`

  $(this).closest('.cars').append(sectionContent);

});

$(document.body).on('click', 'button.js-save', function() {
	alert('hi');
});

.cars-item {
  border-bottom: 1px solid gray;
}

ul {
  /* Added to fully show console in snippet */
  margin: 2px;
}

li {
  display: inline;
}

.cars {
  box-sizing: content-box;
  width: 250px;
  height: auto;
  padding: 10px;
  border: 5px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button" class="js-add-category">Add Category</button> <br> <br>

<div class="main">

  <div class="cars">

    <div class="cars-item js-cars-item">
      <ul>
        <li>
          <input type="checkbox" id="car-1-3" checked disabled>
          <label for="car-1-3"><i class="icon-tick"></i></label>
        </li>
        <li>
          <input type="checkbox" id="car-2-3" checked disabled>
          <label for="car-2-3"><i class="icon-tick"></i></label>
        </li>
        <li>
          <input type="checkbox" id="car-3-3" checked disabled>
          <label for="car-3-3"><i class="icon-tick"></i></label>
        </li>
      </ul>
    </div>

    <button type="button" class="js-add-section">Add Section</button>
    <button type="button" class="js-save-section">Add Section</button>
    <br>

    <div class="section">
    </div>
  </div>
  <br>

Answer 1

You can do this by assuming that you have two checkboxes and take two variable as prev and new. So, when you check any one of them at first it will go to the new and if you check any other the previous will go to prev and the newly checked checkbox will go to new and as you uncheck the newly checked checkbox it will first check if there is any value in prev if yes check that checkbox and make it new and set the current one as prev.