Need to set checkboxes as checked based on string from model data

Question

I am trying to set the checked property based on a comma delimited string stored in the model. This issue is the checked property is not being. Does anyone see what I am doing wrong? Here is what I have:

Data returned from controller...

V1P01,V1P02,V1P03

View code.

$(document).ready(function () {
    var array = "@Model.IncidentVehicle.VA_Sub1VehicleDamage".split(',');
    for (var i in array)
        $("[name=myCheckboxName][value=" + $.trim(array[i]) + "]").attr('checked', true);
    });

<div class="carCBsPassenger">
    <input name="V1P01" id="V1P01" type="checkbox" value="V1P01" style="border: none;" />
    <input name="V1P02" id="V1P02" type="checkbox" value="V1P02" style="border: none;" />
    <input name="V1P03" id="V1P03" type="checkbox" value="V1P03" style="border: none;" />
    <input name="V1P04" id="V1P04" type="checkbox" value="V1P04" style="border: none;" />
    <input name="V1P05" id="V1P05" type="checkbox" value="V1P05" style="border: none;" />
    <input name="V1P06" id="V1P06" type="checkbox" value="V1P06" style="border: none;" />
    <input name="V1P07" id="V1P07" type="checkbox" value="V1P07" style="border: none;" />
    <input name="V1P08" id="V1P08" type="checkbox" value="V1P08" style="border: none;" />
    <input name="V1P09" id="V1P09" type="checkbox" value="V1P09" style="border: none;" />
    <input name="V1P10" id="V1P10" type="checkbox" value="V1P10" style="border: none;" />
    <input name="V1P11" id="V1P11" type="checkbox" value="V1P11" style="border: none;" />
    <input name="V1P12" id="V1P12" type="checkbox" value="V1P12" style="border: none;" />
    <input name="V1P13" id="V1P13" type="checkbox" value="V1P13" style="border: none;" />
    <input name="V1P14" id="V1P14" type="checkbox" value="V1P14" style="border: none;" />
</div>

Try using prop() instead of attr ex $("[name=myCheckboxName][value=" + $.trim(array[i]) + "]").prop('checked', true); — Sandeep Pal, Jul 29 '14 at 13:03
None of those checkboxes have the `name` attribute in your selector? — Rory McCrossan, Jul 29 '14 at 13:03
I figured it out just after posting it. But you are correct Rory. I needed to have the name not the value. — jeffkenn, Jul 29 '14 at 13:08

score 0 · Accepted Answer · answered Jul 29 '14 at 13:06

None of the checkboxes have a name attribute of myCheckboxName. Also, you are missing some opening braces, and have a closing bracket at the end causing syntax errors. Try this:

var array = "V1P01,V1P02,V1P03".split(',');
for (var i = 0; i < array.length; i++) {
    $("#" + $.trim(array[i])).attr('checked', true);
};

Example fiddle

Also, assuming that the format of the list from the server does not change, you can remove the loop by replacing the string to select the elements by their id:

var selector = '#' + array.replace(/\,/g, ',#');
$(selector).attr('checked', true);

Example fiddle

You should consider using `.prop()` as opposed to `.attr()` for checking the boxes... — War10ck, Jul 29 '14 at 13:18

score 0 · Answer 2 · answered Jul 29 '14 at 13:08

You should use the .prop() method instead. Also I switched the for loop for a jQuery .each().

DEMO

var array = ['V1P01', 'V1P02', 'V1P03'];
$.each(array, function(key, val){
    $('input[value="' + $.trim(array[key]) + '"]').prop('checked', true);
});

Hope this helps!

score 0 · Answer 3 · answered Jul 29 '14 at 13:11

0

You should change selector and use prop() method. And maybe use single quotes in value.

$(".carCBsPassenger input[value='" + $.trim(array[i]) + "']").prop('checked', true);

answered Jul 29 '14 at 13:11

user3611630

137
7

Need to set checkboxes as checked based on string from model data

3 Answers3