data-name attribute fetch row details in jquery

Here is a checkbox :

<input type="checkbox" data-name="TWIC Card" name="chkSP" id="chkSP8" value="8">
<label id="lblOut8" for="chkSP8" value="8">TWIC Card</label>

In jquery how can i checked true by using the data-name???

I am tried a lot code:

$("input[data-name='" + $.trim(SPArray[i]) + "']").prop("checked", "checked");
$("input[data-name='" + $.trim(SPArray[i]) + "']").attr("checked", "checked");
$("input[data-name='" + $.trim(SPArray[i]) + "']").attr('checked', true);

these are not working.

Can anyone tell me how can i get the details by data-name??

Important Note:-I want to fetch by only data-name features.

Here is my whole total code:

here is the input type :

<div class="check-box"><input type="checkbox" data-name="4' Tarps" name="chkSP" id="chkSP7" value="7"><label id="lblOut7" for="chkSP7" value="7">4' Tarps</label></div>

<div class="check-box"><input type="checkbox" data-name="TWIC Card" name="chkSP" id="chkSP8" value="8"><label id="lblOut8" for="chkSP8" value="8">TWIC Card</label></div>

 var SP="TWIC Card" ;
var SPArray = SP.split(',');
                            var allSelectedSP = "";
for (var i = 0; i < SPArray.length; i++) {
Array.from(document.querySelectorAll("input[data-name='" + SPArray[i].trim() + "']")).forEach(function (input) {
                                            input.checked = true;
                                        });
allSelectedSP += ", " + $.trim(SPArray[i]);
}