Checkbox serialization issue

Question

I have a webpage with multiple checkboxes (code for one of them below):

<div>
        <label for="ViewAsWebpage">
            {{#if this.ViewAsWebpage}}
                <input type="hidden" id="ViewAsWebpage" name="ViewAsWebpage" value="true"/> 
                <input id="chkViewAsWebpage" type="checkbox" class="enable-checkbox" checked /> 
            {{else}}
                <input type="hidden" id="ViewAsWebpage" name="ViewAsWebpage" value="false"/> 
                <input id="chkViewAsWebpage" type="checkbox" class="enable-checkbox" /> 
            {{/if}}
            <span>View as Webpage</span>
        </label>
    </div>

I have an event handler that handles the change event (for all checkboxes):

changeCheckboxValue: function(e) {
            var target = this.$(e.target);
            var id = this.$(e.target).siblings().attr('id');

            $(id).val(target.is(':checked') ? 'true' : 'false');

The above event works great and sets the true/false value.

However, when I serialize the form (to POST the form values on submit)- these updated values are not reflected. Can someone pls let me know what I am missing?

Answer 1

I think the problem is because you are using the same id for all the hidden fields.

Let's review this code:

changeCheckboxValue: function(e) {
    var target = this.$(e.target);    // get the checkbox that is clicked
    var id = this.$(e.target).siblings().attr('id');  // get checkbox's siblings' id
                                             // so id == 'ViewAsWebpage'
    $(id).val(target.is(':checked') ? 'true' : 'false');  // HERE!!
              // $(id) returns all the hiddens that have id == 'ViewAsWebpage'

So the value of all the hiddens change altogether for several times. They will be all 'true' or 'false' eventually.

I think you should select the hidden fields like this.

changeCheckboxValue: function(e) {
    var target = $(e.target);
    var hidden = target.prev();

    hidden.val(target.is(':checked') ? 'true' : 'false');

Answer 2

The problem was the missing #.

Fixed, by changing :

$(id).val(target.is(':checked') ? 'true' : 'false');

to

$('#' + id).val(target.is(':checked') ? 'true' : 'false');

Answer 3

Use prop() to set the checked property:

$(id).prop("checked", true);

or

$(id).prop("checked", false);