Manipulated checkbox to checked using element of json callback from Ajax

Question

I use ajax in jquery to get some data like this :

$.ajax({
          url : "<?=  base_url('surveyor/c_surveyor_inspection/get_data_untuk_inspection_surveyor_dua'); ?>",
          type : "POST",
          data : {
              ID : id
          },
          dataType :'json',
          success : function(response){
              console.log(response);
          }
      });

Based this ajax, I got JSON like this :

{
"header ": [{
    "NO_INSPECTION": "55",
    "ID_CONDITION": "1",
    "NAMA_CONDITION": "DIRTY"
}, {
    "NO_INSPECTION": "55",
    "ID_CONDITION": "2",
    "NAMA_CONDITION": "DAMAGE"
}],
"transaction": [{
    "NO_INSPECTION": "55",
    "ID_ITEM_INSPECTION": "1",
    "NOMOR_ITEM_INSPECTION": "1",
    "NAMA_ITEM_INSPECTION": "Protection Box Cover",
    "CONDITION": "9",
    "ALIAS": "BE",
    "NAME_ITEM": "BENT"
}, {
    "NO_INSPECTION": "55",
    "ID_ITEM_INSPECTION": "2",
    "NOMOR_ITEM_INSPECTION": "2a",
    "NAMA_ITEM_INSPECTION": "Manhole LID, Fastening Bolts",
    "CONDITION": "7",
    "ALIAS": "B",
    "NAME_ITEM": "BROKEN"
}]

}

Please see in first element og this json named header With this element, I want to manipulated a html's checkbox like this

<div class="col-sm-12">
  <label class="checkbox-inline">
     <input type="checkbox" value="1" checked="checked" name="condition[]">Dirty
  </label>

  <label class="checkbox-inline">
     <input type="checkbox" value="2" name="condition[]">Damage
  </label>

  <label class="checkbox-inline">
     <input type="checkbox" value="3" name="condition[]">Clean
  </label>

  <label class="checkbox-inline">
     <input type="checkbox" value="4" name="condition[]">Off Hire
  </label>
</div>

What should I do i success ajax ? Which is In JSON, I got value and item each ' 1' , 'DIRTY' and '2' , 'DAMAGE' that means its will be checked in html. Any help it so appreciated. Thanks a lot

Answer 1

You could do something like this:

var i;

// uncheck all checkboxes
$('input[type=checkbox]').prop('checked', false);

// check appropriate checkboxes
for (i = 0; i < response.header.length; i = i + 1) {
  $('input[type=checkbox][value=' + response.header[i].ID_CONDITION + ']').prop('checked', true);
}