jquery .prop() doesn't work for checkbox

Question

Banging my head on a very simple problem (if you know where to look for it I suppose) I ask for your advice.

I have a table like this built from PHP:

echo '<tr><td class="report"><input type="checkbox" id="crediti['.$i.']" name="crediti['.$i.']" value="'.$cred['id_cre'].'" ';
    if($check == 1){ echo "checked";}else{ echo "";}
    echo' /></td><td class="report">'.$cred['id_cre'].'</td>
    <td class="report">'.number_format($cred['gbv_tot'],'2',',','.').'</td>
    <td class="report"><input class="input_field" type="text" name="chiesto['.$i.']" value="'.$chiesto.'"></td>
    <td class="report"><input type="text" name="ammesso['.$i.']" value="'.$ammesso.'"></td>
    <td class="report"><input type="text" name="data_ammesso['.$i.']" value="'.$data_ammesso.'" class="data_field"></td></tr>';

I have also some jquery code to check each checkbox if the user enters a value in one of the input fields of the row.

$('.input_field').blur(function(){
    if($(this).val()!=''){
        $(this).closest("input").prop("checked", true); 
    }
}); 

I have verified that the selector is identifying the right checkbox but I cannot manage to turn that checkbox to selected. Nothing is thrown as an error. Just nothing happens. What am I doing wrong? Where should I look for the error?

Thanks in advance!

Answer 1

You need to target the checkbox in the same row.

.closest() find an matching ancestor element, so the checkbox is not a ancestor of the checkbox element that is why it is not working.

You need to find the tr parent of the changed field then find the checkbox within it.

$(this).closest("tr").find("input:checkbox").prop("checked", true);