ユーザーが各画像を保存するかどうかを決定できるチェックボックス付きのいくつかの画像を表示するビューがあります。チェックボックスを非表示にして、代わりに画像の上にチェックマークまたは 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 になります。ここで何が欠けていますか?