复选框已选中，但值未传递给 asp.net mvc 中的控制器

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');
}

});

在视图中显示复选框的 HTML 代码如下：

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

这里 ENABLED 是模型中的布尔字段，如下所示：

public bool ENABLED { get; set; }

在浏览器中生成的这个视图的html代码是这样的：

现在，当我打开视图时，复选框显示为 On/Off 开关，当我将复选框设置为 On（选中）到 Off（未选中）或 Off（未选中）到 On（选中）（即仅单击一次）并提交表单，将正确的值发布给控制器。但是，当我单击不止一次以将复选框状态（例如 On（选中）更改为 Off（未选中）再次更改为 On（选中）或单击任意次数并最终将其设为 On（选中）时，它每次都会向控制器发布错误消息。我不知道为什么会这样。根据上面的 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');