with js set checked radio box issue with chose another by user

Question

I have problem with checked radio box set up. I want make edit function, and i have problem with my js code, who set checked value in my modal form (html code).

My variable data[6] holding value of name. And for example if my data[6] is Test, then checking my radio box, where id is EditTest and then give that radio box label class checked. Problem is then i want chose another one button, not the Test (different). If i pick different radio box label, checked not change.

My js code. first off all then clicked button in datatable edit, im clear all active and checked values.

$('input:radio').prop('checked', false);
$('label:has(input:not(:checked))').removeClass('active');

then i by id give that radio box checked

$('#Edit' + data[6]).prop('checked', true);
$('label:has(input:checked)').addClass('active');

My html

user_10606400 · Answer

You can use $('#Edit' + data[6]).closest("label") to add active class to label where radio is checked and using $('.form-group label').removeClass('active'); remove active class from all label.

Demo Code :

//on chnge or radio
$(".btn-group-toggle input:radio").on("change", function() {
  $('.btn-group-toggle label').removeClass('active'); //remove active class from lbel
  $('.btn-group-toggle input:radio').prop('checked', false);
  $(this).prop('checked', true); //add checkd true 
  $(this).closest("label").addClass('active');
})

$(".edit").on("click", function() {
  var data = "TEST" //data[6]
  $('input:radio').prop('checked', false);
  $('.form-group label').removeClass('active'); //remove active class from any label 
  $('#Edit' + data).prop('checked', true); //use data[6]
  //add active class to only label where radio is checked
  $('#Edit' + data).closest("label").addClass('active'); //use data[6]

})

.active {
  color: red;
}

with js set checked radio box issue with chose another by user

1 Answers