Refracted Paladin Refracted Paladin - 6 months ago 26
Javascript Question

Checkbox control doesn't accept value on Page Load

I have the below JS on my _Layout.cshtml. Basically on every "Page Load" the checkbox is getting set to Checked(true) even though the code should set it to the Cookie.

If I just set it to false on Page Load it works.(e.g.

$("#ShowInactive").prop("checked", false);
) But, as you can see in the code, I'm able to set the value of the checkbox in the Click event based of the Cookie.

I have alse tried having the function be
$(document).ready(function () {
but noting was different.

<script type="text/javascript">
$(function () {
console.log('1 - ' + Cookies.get('ShouldShowInactive'));
var Inactive = Cookies.get('ShouldShowInactive') == true ? true : false;
$("#ShowInactive").prop("checked", Inactive);

$("#ShowInactive").click(function () {
console.log('2 - ' + Cookies.get('ShouldShowInactive'));
var ShowInactive = this.checked ? true : false;
console.log('3 - ' + ShowInactive);
Cookies.set('ShouldShowInactive', ShowInactive);
console.log('4 - ' + Cookies.get('ShouldShowInactive'));

The Checkbox control:

<div class="pull-right checkbox">
<label class="btn btn-success">
@(Html.Kendo().CheckBox().Name("ShowInactive").Label("Show Inactive"))

When I inspect the cookie, through my
and through Chrome Dev Tools the value is always shown as
. Also, before the above way I was trying to set it straight to
Basically the one way the check box was always checked on Page Load and the current way it's always unchecked. Both ways ignoring the correct value of the Cookie.


The Cookies.get() function returns a string and "true" == true would evaluate to false. Change the condition to

 var Inactive = Cookies.get('ShouldShowInactive') == "true" ? true : false;