0

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

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

我有一个事件处理程序来处理更改事件（对于所有复选框）：

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

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

上述事件效果很好并设置了真/假值。

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

4

3 回答 3

1

问题是缺少#。

固定，通过改变：

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

至

$('#' + id).val(target.is(':checked') ? 'true' : 'false');
于 2012-09-28T21:48:40.027 回答
1

使用prop()设置选中的属性：

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

或者

$(id).prop("checked", false);
于 2012-09-28T20:16:53.157 回答
1

我认为问题在于您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');
于 2012-09-28T20:19:35.033 回答