'Checkbox is checked but value not passed to controller in asp.net mvc

I am developing application in ASP.Net MVC and getting strange problem. In my view I am showing checkbox as On/Off switch like this:

enter image description hereenter image description here

for this I am using following jquery code

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 code for showing checkbox in view is like this:

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

here ENABLED is boolean field in model like this:

public bool ENABLED { get; set; }

In browser for this view html code generated is like this:

enter image description here

Now when I open view, checkbox is displayed as On/Off switch, when I make checkbox which is On(checked) to Off(unchecked) OR Off(unchecked) to On(checked) (ie. click only ONCE) and submit form it post proper values to controller. But when I click more than ONCE to change checkbox status like On(checked) to Off(unchecked) again to On(checked) OR click any number of times and at end make it On(checked) it posts false to controller everytime. I don't know why this is happening. As per jquery code above it's making checkbox checked when it's On(checked). I cross-chekced it's working in FireBug it's added attribute Checked="Checked" when checkbox is checked(On) and removes attribute when it's unchecked(Off). I am not able to find out reason why it's not posting true even checkbox is checked(On) when it's clicked more than ONCE. Please tell me what's wrong in code.

Thanks...

jqueryasp.net-mvccheckboxmodel-binding


Solution 1:[1]

That's because you have a hidden input field with the same name ENABLED, that has a fixed value 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">

It's also advisable to use .prop() instead of .attr() and .removeAttr(); therefore use

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

Solution 2:[2]

I have a solution to this problem which is more readable and easy to use.

$(document.body).on('change', 'input[type="checkbox"]', function () {
    var inp = $(this);
    inp.val(inp.prop('checked'));
});

This way, every checkbox will have True value when is checked and False when it's unchecked and also the controller and action is able to understand the state of checkbox.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Hooman

Related Questions