Change Button Text and CheckBox checked unchecked based on Database value in ASP.Net MVC

Turn on email Buttton---> i am turning on the button(click)---> so button becomes Turn off button(text changed) and checkbox becomes checked.

On page Load,i am getting the same as Turn on button and unchecked checkbox. i tried by adding the Following javascript on page load but dint worked for me:

Model:

public ActionResult Index()
{
     BD.isEmailON_OFF= db.Email_ON_OFF_T.Select(x=>x.isEmailON_OFF).FirstOrDefault().GetValueOrDefault();
}

I have table:IS_Email_on_OFF_T:

I inserted to isemailonoff column as 0

Sp: 

ALTER procedure [dbo].[Sp_Email_on_off]
    @checkemails varchar(10)
As
Begin
    if(@checkemails='false')
        Update Email_ON_OFF_T set isEmailON_OFF=0
    else
        Update Email_ON_OFF_T set isEmailON_OFF=1
End

Controller:

        [HttpPost]
        public ActionResult CheckEmail(string checkemails)
        {           
            //calling Stored Procedure
            if (!string.IsNullOrWhiteSpace(checkemails)|| checkemails=="true" || checkemails=="false")
            {
                var checkemails1 = new SqlParameter("checkemails", checkemails);
                db.Database.ExecuteSqlCommand("EXEC Sp_Email_on_off @checkemails", checkemails1);
            }

            return new JsonResult { };
        }

views: 

            @{
                if (Model.isEmailON_OFF == 0)
                {
                    <input type="button" value="Turn Email on" class="btn btn-success" id="btnturnemailonoff" />
                    <input type="checkbox" id="Chkemailonoff" style="float:right;" />
                }
                else
                {
                    <input type="button" value="Turn Email off" class="btn btn-success" id="btnturnemailonoff" />
                    <input type="checkbox" id="Chkemailonoff" style="float:right;" checked/>
                }
            }

Ajax call on button click: 

<script type="text/javascript">
    $(document).ready(function () {
        $('#btnturnemailonoff').on('click', function () {
            var checked = !$(this).data('checked');
            var message = checked ? 'Turn Email ON' : 'Turn Email OFF';
            if (confirm("Do you want to " + message + "? ")) {
                $("#Chkemailonoff").prop('checked', checked);
                $(this).val(checked ? 'Turn Email Off' : 'Turn Email on')
                $(this).data('checked', checked);
                var url = '@Url.Action("CheckEmail", "BillingDetails")';
                $.ajax({
                    url: url,
                    type: "POST",
                    data: { checkemails: checked },
                    dataType: "json",
                    // traditional: true,
                    success: function () {
                        alert("ajax request to server succeed");
                    }
                });
            }//end of if
        });
    });
</script>

This is what i tried.

turn on email----->becomes turn off button and checkebox checked.

turn off button----> becomes turn on button and checkbox uncheked.

worked correctly till here.

turn on email----->becomes turn off button and checkebox checked.

page load(loading the page)

clicking on turn off button and not changing to turn on button(1st attempt)(ISSUE)

clicking on turn off button(2nd tym) and it changes.