jquery - 复选框已选中，但值未传递到 asp.net mvc 中的 Controller

Question

我正在 ASP.Net MVC 中开发应用程序并遇到奇怪的问题。在我看来，我将复选框显示为开/关开关，如下所示:

为此我使用以下 jquery 代码

function checkSwitch()
{
  $('input.checkSwitch').each(function() {

    if($(this).attr('checked') == 'checked'){
        $(this).wrap('<div class="checkSwitch on" />');
    } else {
        $(this).wrap('<div class="checkSwitch off" />');
    }

    $(this).parent('div.checkSwitch').each(function() {
        $(this).append('<div class="checkSwitchInner"><div class="checkSwitchOn">On</div><div class="checkSwitchHandle"></div><div class="checkSwitchOff">Off</div></div>');
    });

  });
}

$(document).on('click', 'div.checkSwitch', function() {

var $this = $(this);

if($this.hasClass('off')){
    $this.addClass('on');
    $this.removeClass('off');
    $this.children('input.checkSwitch').attr('checked', 'checked');
} else if($this.hasClass('on')){
    $this.addClass('off');
    $this.removeClass('on');
    $this.children('input.checkSwitch').removeAttr('checked');
}

});

在 View 中显示复选框的 HTML 代码如下:

<script>
   checkSwitch();
</script>
@Html.CheckBoxFor(model => model.ENABLED, new { @class = "checkSwitch", @checked = "checked" })

这里 ENABLED 是模型中的 bool 字段，如下所示:

public bool ENABLED { get; set; }

在浏览器中，该 View 生成的 html 代码如下:

现在，当我打开 View 时，当我将复选框设置为打开(选中)到关闭(未选中)或关闭(未选中)到打开(选中)(即仅单击一次)时，复选框显示为开/关开关并提交表单，将正确的值发布给 Controller 。但是，当我多次单击以将复选框状态更改为“打开”(选中)到“关闭”(未选中)，再次更改为“打开”(选中)，或者单击任意次数并最终将其设置为“打开”(选中)时，它每次都会向 Controller 发布 false 。我不知道为什么会发生这种情况。根据上面的 jquery 代码，它使复选框在打开(选中)时处于选中状态。我交叉检查它在 FireBug 中工作，当复选框被选中(打开)时，它添加属性 Checked="Checked"，并在未选中(关闭)时删除属性。我无法找出为什么它没有发布真实的原因，即使在单击多次时选中(打开)复选框。请告诉我代码有什么问题。

谢谢...

Answer 1

这是因为您有一个隐藏的input字段，其名称与ENABLED相同，并且具有固定值false。

<input type="hidden" name="ENABLED" value="false"> <!-- THIS IS THE CAUSE -->

<input id="ENABLED" class="CheckSwitch" type="checkbox" value="true" name="ENABLED" checked="checked">

还建议使用.prop()代替.attr()和.removeAttr()；因此使用

$this.children('input.checkSwitch').prop('checked', true);
//instead of $this.children('input.checkSwitch').attr('checked', 'checked'); and

$this.children('input.checkSwitch').prop('checked', false);
//instead of $this.children('input.checkSwitch').removeAttr('checked');