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

Question

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

为此我使用以下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开关，当我勾选（选中）为Off（未选中）或Off（未选中）为On（选中）时复选框（即仅单击ONCE）并提交表格，将适当的价值发布给控制人。但是，当我单击ONCE以更改复选框状态时，如On（选中）再次关闭（取消选中）再次打开（选中）或单击任意次，最后将其设置为On（选中），它每次都会向控制器发送false。我不知道为什么会这样。根据上面的jquery代码，当它打开（选中）时，它会勾选复选框。我对它在FireBug中的工作进行了交叉处理，它增加了属性Checked =＆＃34; Checked＆＃34;选中复选框（开）时，取消选中属性（关）。我无法找到原因，为什么它不会发布为真，即使复选框被点击超过ONCE，也会选中复选框（On）。请告诉我代码中的错误。

...谢谢

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