Creating dynamic checkboxes in play2 framework?

Question

I have two lists, ListA is a list containing the name and value of would-be-generated set of checkboxes. ListB tells which ListA checkbox should be checked.

Here is the code:

@for((listA, index) <- model.ListA.zipWithIndex){
    @if(index % 4 == 0){
    <tr>
    }
    <td>
    @for(listB <- model.ListB){
    <input id="listB@index" name="listB[@index]" type="checkbox"
        value="@listA.codeVal" @(if(listA.codeVal == listB) "checked")/>
    <label>@listA.nameVal</label>
    }
    </td>
    @if(index % 4 == 3){
    </tr>
    }
}

The code above generates the checkboxes redundantly, not just a single set of ListA checkboxes with checks on them.

Ideal:

[/]CheckBox1 []CheckBox2 [/]CheckBox3 []CheckBox4

Actual:

[/]CheckBox1 [ ]CheckBox1 [ ]CheckBox1 [ ]CheckBox1

[ ]CheckBox2 [ ]CheckBox2 [ ]CheckBox2 [ ]CheckBox2

[ ]CheckBox3 [ ]CheckBox3 [/]CheckBox3 [ ]CheckBox3

[ ]CheckBox4 [ ]CheckBox4 [ ]CheckBox4 [ ]CheckBox4

Can you give me a clue on what I was doing wrong? Any help would be much appreciated. Thank you

Answer 1

Fixed it with jquery.

html:

@for((listA, index) <- model.ListA.zipWithIndex){
    @if(index % 4 == 0){
    <tr>
    }

    <td>
    <input id="listB@index" class="listAClass" name="listB[@index]" type="checkbox"
        value="@listA.codeVal"/>
    <label>@listA.nameVal</label>
    </td>

    @if(index % 4 == 3){
    </tr>
    }
}

@for(listB<- model.ListB) {
    <input type="hidden" name="hiddenListB" value="@listB">
}

jQuery:

function setSelected() {

    var arrayListB = document.getElementsByName('hiddenListB');
    var arraySize = arrayListB.length;

    $(".listAClass").each(function(i) {

        var thisValue = $(this).val();

        for (var x = 0; x < arraySize; x++) {
            if (thisValue == arrayListB[x].value) {
                $(this).prop('checked',true);
            } else {
                if ($(this).is(":checked")) {
                } else {
                    $(this).prop('checked',false);
                }
            }
        }
    });
}