Validate Checkboxes When Checking The Same Order Within The Same Column In Jquery

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 th

Solution 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.

Solution 2:

@jones, Here you have to manage this via giving ID to your mains car category div and another Id manage with your car items div. based on dynamic ID i create key pair value array. where in key i store the Id of your cars where as in values i manage the list of selected checkbox Id. when you unchecked i found the key from array and get its value back in array which contains checkedID track. and when its unchecked i pickup lastID and remove from array value too. Kindly look on my given solution and let me know is this case works for you or not?

$(document).ready(function(){
var cnt = 1;
var carcnt = 1;
var arryRollback= [];
$(".main").on('change', '.js-cars-item [type="checkbox"]', function() {
  var carKey = $(this).closest('.cars').attr("id").replace("carCategory","");
  var carVal = $(this).closest('.js-cars-item').attr("id").replace("chkcar_","");
  var idx = $(this).closest('li').index(); 
  var chk = $(this).is(":checked"); 
  var obj = this; 
  if($(this).prop("checked"))
  {
	  if(arryRollback.length ==0){
		 var sArray = [];
		 sArray.push(carVal);
		 var singleEntity = {
			carsParent : carKey,
			carVal : sArray
		 };
		 arryRollback.push(singleEntity);
	  }
	  else{
		 if(findObjectByKey(arryRollback,"carsParent",carKey)){
		  for (var i = 0; i < arryRollback.length; i++) {
			if (arryRollback[i]["carsParent"] === carKey) {
				var valArray = [];
				valArray =  arryRollback[i]["carVal"];
				valArray.push(carVal);
				arryRollback[i]["carVal"] = valArray;
			}
		  }
		}
		else{
			var sArray = [];
			sArray.push(carVal);
			 var singleEntity = {
				carsParent : carKey,
				carVal : sArray
			 };
			 arryRollback.push(singleEntity);
		}
	  }
	  $(this).closest('.cars').find('.js-cars-item').each(function() { //Loop every js-cars-item
    $(this).find('li:eq(' + idx + ') [type="checkbox"]').not(obj).prop("checked", false);
  });
  }
  else{
     for (var i = 0; i < arryRollback.length; i++) {
	   if (arryRollback[i]["carsParent"] === carKey) {
	      var valArray = [];
	      valArray =  arryRollback[i]["carVal"];
		  if(valArray.length == 0)
		   {
		      $("#chkcar_"+ carKey + "_1").find(' li:eq(' + idx + ') [type="checkbox"]').prop("checked", true);
		   }
		   else{
		      valArray.splice(-1,1);
			  console.log(arryRollback);
		      if(valArray.length == 0)
				{
				  $("#chkcar_"+ carKey + "_1").find(' li:eq(' + idx + ') [type="checkbox"]').prop("checked", true);
				}
			  else{

				$("#chkcar_"+ valArray[valArray.length-1]).find(' li:eq(' + idx + ') [type="checkbox"]').prop("checked", true);
			  }
		   }
	   }
	 }
  }

  
 
})

functionfindObjectByKey(array, key, value) {
    
    for (var i = 0; i < array.length; i++) {
        if (array[i][key] === value) {
            returntrue;
        }
    }
    returnfalse;
}
$('.js-add-category').click(function() {
 carcnt = carcnt + 1;
 var categoryContent = '<div class="cars" id="carCategory'+carcnt+'">' +
    '<div class="cars-item js-cars-item" id="chkcar_'+carcnt+'_1"> <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" id="btnSaveSec_'+carcnt+'">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 currsection = $(this).attr("id").replace("btnSaveSec_","");
	  var totCount = $("#carCategory"+currsection).find(".cars-item").length +1;
	  var sectionContent = '<div class="cars-item js-cars-item" id="chkcar_'+currsection+'_'+totCount+'">' +
	  '<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;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><buttontype="button"class="js-add-category">Add Category</button><br><br><divclass="main"><divclass="cars"id="carCategory1"><divclass="cars-item js-cars-item"id="chkcar_1_1"><ul><li><inputtype="checkbox"id="car-1-3"checkeddisabled><labelfor="car-1-3"><iclass="icon-tick"></i></label></li><li><inputtype="checkbox"id="car-2-3"checkeddisabled><labelfor="car-2-3"><iclass="icon-tick"></i></label></li><li><inputtype="checkbox"id="car-3-3"checkeddisabled><labelfor="car-3-3"><iclass="icon-tick"></i></label></li></ul></div><buttontype="button"class="js-add-section"id="btnSaveSec_1">Add Section</button><buttontype="button"class="js-save-section">Add Section</button><br><divclass="section"></div></div><br>

Happy to hear from you soon!!