Question

我有一个包含多个复选框的网页（下面其中一个的代码）：

<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>

我有一个处理change事件的事件处理程序（对于所有复选框）：

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

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

上述事件效果很好，并设置了true / false值。

但是，当我序列化表单（在提交时POST表单值）时 - 不会反映这些更新的值。有人可以告诉我我错过了什么吗？

Answer 1

使用prop()设置已检查的属性：

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

或

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

Answer 2

我认为问题是因为您对所有id字段使用相同的hidden。

让我们回顾一下这段代码：

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'

因此，所有隐藏的价值都会多次改变。他们最终将是“真实的”或“虚假的”。

我认为你应该选择这样的隐藏字段。

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

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

Answer 3

问题是缺少＃。

修正了：改变：

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

到

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

复选框序列化问题

3 个答案: