Question

我有一个视图，显示一些带有复选框的图像，允许用户决定是否保存每个图像。我隐藏了复选框，而是在图像顶部使用复选标记或X来表示它是否被选中。这一切都很好。但是，复选框的值不会改变 - 它始终保持未选中状态。

以下是我在视图中的代码：

<div class="imgCheckBoxes">
    <label for="MyImages_Cover" class="imgCheckBox">
        <img src="http://example.com/image.jpg" alt="cover" />
    </label>
    @Html.CheckBoxFor(m => m.MyImages.Cover, new { @class = "check-box hideChkBx chkForImg" })
</div>

其中呈现以下HTML：

<div class="imgCheckBoxes">
    <label for="MyImages_Cover" class="imgCheckBox">
        <img src="http://example.com/image.jpg" alt="cover" />
    </label>
    <input class="check-box hideChkBx chkForImg" id="MyImages_Cover"
        name="MyImages.Cover" type="checkbox" value="true" />
    <input name="MyImages.Cover" type="hidden" value="false" />
 </div>

我的jQuery代码如下（删除了一些处理定位的代码等）：

var closeBtn = '../Content/img/close.png';
var okBtn = '../Content/img/ok.png';

$(document).ready(function (e) {
    if ($('.imgCheckBox').html() != null && $('.imgCheckBox').html() != '') {
        initializeOkCloseImg();
    }
    $('.chkForImg').change(function (e) {
        initializeOkCloseImg();
    });
});

function initializeOkCloseImg() {
    var chkImg = '';
    $('.chkForImg').each(function (index, element) {
        chkImg = closeBtn;

        if ($(this).is(':checked')) {
            chkImg = okBtn;
        }
    });
}

在切换表示已选中/未选中的图像方面，一切正常，但在发布表单时，复选框始终为false。我在这里缺少什么？

Answer 1

在post方法中，您是否返回带有更新值的模型（在本例中为复选框的值 MyImages.Cover ）。

Answer 2

好吧，我终于找到了问题所在。问题实际上不是jQuery，而是我的视图模型。显然这不起作用，因为我在我的视图模型（MyImages.Cover）中使用了一个模型。出于某种原因，这一切都是出于怪癖。当我在视图模型中使用标准bool时，一切都很完美。我不知道为什么会这样，但它有点糟糕，因为我需要在几个页面上重用这个逻辑，并且在每个视图模型中定义单独的属性似乎是乏味和不必要的。希望有一种更简单的方法！

MVC 3使用jQuery选择和取消选中复选框

2 个答案: