CheckBoxFor data toggle on change event not working ? Jquery

Question

i am trying to use this jquery code for alerting on change if checked true,

 $("#NSupport").change(function () {
            var tid = this.id;

            if ($(this).is(":checked")) {
                alert("inside");
            }
        });

here is my check box,

@Html.CheckBoxFor(model => model.NSupport, new { data_toggle = "toggle",data_width = "100", data_on = "yes", data_off = "No", data_offstyle = "info" })

Can any one has idea why it is not calling jquery function?

BR

EDIT,

I just use this code in which it is alerting "dad" but only on page load,

  $('#NSupport').toggle(
            function () {
                $('.check').attr('Checked', 'Checked');
                alert('mom');
            },
            function () {
                $('.check').removeAttr('Checked');
                alert('dad');
            }
        );

jquery script location in a page top or bottom? Is your script inside the document ready? Is there any console error on dev tools of the browser? — tontonsevilla, Aug 25 '20 at 06:35
Did you try `$(document).on("change", "#NSupport", function() ...` ? — freedomn-m, Aug 25 '20 at 07:23
Note: `.toggle` is synonymous with `.show`/`.hide` - it's not an event that occurs when the checkbox is "toggled" so runs at start, 1st arg is duration and 2nd is oncomplete - so runs at startup because it toggles visibility immediately. https://api.jquery.com/toggle/ — freedomn-m, Aug 25 '20 at 07:27
Just before your `$("#NSupport").change` add the line `console.log($("#NSupport").length)` - if it's 0/zero at that time then the event has nothing to attach to and you'll need event delegation or call it later — freedomn-m, Aug 25 '20 at 07:28
That's a start, can you also do: `console.log($("[id=NSupport]").length)` (should have included that, sorry) — freedomn-m, Aug 25 '20 at 07:38
The next step is to try to *recreate* the issue - either here in an SO snippet (preferred) (see [mcve]) or a jsfiddle or just on your page. Either start with nothing and add components/js so it works then continue adding the rest of your page until it stops working - or removing parts of your page until it works. Your code *as provided in the question* can *easily* be demonstrated to work fine (https://jsfiddle.net/pn9rhtqe/), so there must be something else in your page/project that's stopping it. — freedomn-m, Aug 25 '20 at 07:41
@freedomn-m thanks for your help but i really dont understand how to fix it. which part stops it working. i check link its bouncing on my head — Doc, Aug 25 '20 at 07:46
By the way simple check box calling change function from the same partial view i am using this data toggle — Doc, Aug 25 '20 at 11:32

Jeethendra · Answer 1 · 2020-08-25T07:42:06.407

1

Put the javascript code inside jQuery onready event like:

$(document).ready(function () {
    $("#NSupport").change(function () {
        var tid = this.id;

        if ($(this).is(":checked")) {
            alert("inside");
        }
    });
});

Edit: To include both Main and partial view

Index.cshtml looks like:

@model WebApi.Models.mvcempmodel
@{ 
    Layout = null;
}
<html>
<body>    
    <div class="container body-content">
        <div>This is my Index.cshtml</div>
        @Html.Partial("ViewCheckBox", Model)        
    </div>

    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#NSupport").change(function () {
                if ($(this).is(":checked")) {
                    alert("inside");
                }
            });
        });
    </script>
</body>
</html>

Partial cshtml looks like:

@model WebApi.Models.mvcempmodel


@Html.CheckBoxFor(model => model.NSupport, new { data_toggle = "toggle", data_width = "100", data_on = "yes", data_off = "No", data_offstyle = "info" })

edited Aug 25 '20 at 07:42

answered Aug 25 '20 at 06:34

Jeethendra

356
1
6

Its not working and not showing any error. This checkbox is in partial view – Doc Aug 25 '20 at 06:42
@Doc don't put your javascript inside the partial view. put the script on the parent view. That's why it is not working. – tontonsevilla Aug 25 '20 at 06:44
@ tontonsevilla it is in partial view – Doc Aug 25 '20 at 06:45
@Doc check this [Is it OK to put JavaScript in Partial Views](https://stackoverflow.com/a/11099593/8795884). – tontonsevilla Aug 25 '20 at 06:47
@ tontonsevilla but all the remaining scripts are running in this partial view even on of function for the same check box is also working if you check my edited post – Doc Aug 25 '20 at 06:52
I also tried in separate script file but still not working – Doc Aug 25 '20 at 06:57
@Doc - are you loading the partial view when the main page load or is your partial view loaded later using Ajax? – Jeethendra Aug 25 '20 at 07:10
loading with main page – Doc Aug 25 '20 at 07:20
@Doc - I tried to do exactly what you have described in the comments and I have updated my answer above. The above code is working perfectly fine, Can you refer to the above code and verify with yours? – Jeethendra Aug 25 '20 at 07:42
@Jeethendra thanks for your support but it seems like some issue that is preventing me to call on change event "freedomn-m" suggestions might be help me out. let me check :( – Doc Aug 25 '20 at 08:01

CheckBoxFor data toggle on change event not working ? Jquery

1 Answers1