Bind to unchecked checkbox created dynamically

I have a list of dto's that I use to dynamically create sections (nicely formatted in columns, etc). I do not know the size of the list. I have a form with a command. We use the name attribute to bind (not spring form tag). My problem is that the dynamically create checkbox binds to a true/false. So if it is ticked it works great, but unticked....not (and I know it is because only checked boxes are bound). But how do I solve it. If it is ticked, then unticked again, it doesn't change the value to false. I know there is a way to do it with hidden fields, but not sure how exactly. Any other suggestions welcome. Here is the whole section

<div class="row" id="AdditionalCardDiv">
    <div class="col-sm-12">
        <div class="panel panel-secondary7">
            <div class="panel-body" id="additionalCardChoose">
                <h4 class="color--secondary7">
                    Additional Company Card
                    <span class="right small push-half--top"><a id="removeAdditionalCard" href="#" class="muted"> &times; remove</a></span>
                </h4>
                <hr>

                <c:choose>
                    <c:when test="${potentialCardsSize gt 0}">
                        <p>Please indicate the members you would like to give an additional Card to:</p>

                        <c:forEach var="element"
                                       items="${cardApplicationDto.cardAppDto.potentialCards}"
                                       varStatus="listElement">
                            <c:if test="${element.credCard eq 0 || element.credCard eq 1}">
                                <c:if test="${listElement.index % 2 eq 0}">
                                    <c:if test="${listElement.index gt 0}">
                                        <hr/>
                                    </c:if>
                                    <div class="row columns-divider--dotted">
                                </c:if>

                                    <div class="col-sm-6">
                                        <%--<div class="media">--%>
                                        <div class="text--center">
                                            <i class="fa fa-user centre fa-4x push-half--bottom color--secondary7"></i>
                                            <%--<div class="media-body">--%>
                                                <h6><c:out value="${element.title}"/>&nbsp;<c:out value="${element.firstName}"/>&nbsp;<c:out value="${element.surname}"/></h6>
                                                <div class="checkbox icheck-container text--left clearfix">
                                                    <label class="">
                                                        <div class="icheckbox_square-blue" style="position: relative;"><input class="js-icheck-input" type="checkbox" value="true" name="cardAppDto.potentialCards[${listElement.index}].credCardSelect" <c:if test="${cardApplicationDto.cardAppDto.potentialCards[listElement.index].credCardSelect}">checked = "checked"</c:if> style="display: inline-block; position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"></ins></div>
                                                        Give a additional Card
                                                    </label>
                                                </div>
                                            <%--</div>--%>
                                        </div>
                                        <%--</div>--%>
                                        <hr/>

                                        <div>
                                            <label for="CardName${listElement.index}">Name to appear on card</label>
                                            <input type="text" class="form-control" id="CardName${listElement.index}" name="cardAppDto.potentialCards[${listElement.index}].embossName" value="${cardApplicationDto.cardAppDto.potentialCards[listElement.index].embossName}" maxlength="26">
                                            <p class="help-block">Maximum of 26 characters.</p>
                                        </div>

                                    </div>
                                <c:if test="${listElement.index % 2 gt 0 || listElement.index eq potentialCardsSize - 1}">
                                    </div>
                                </c:if>
                            </c:if>
                        </c:forEach>
                    </c:when>
                    <c:otherwise>
                        <p>No secondary cards available on your account</p>
                    </c:otherwise>
                </c:choose>
            </div>
        </div>
    </div>

</div>