onclick in ASP.NET MVC razor CheckBoxFor not working

Question

I need to assign an onclick event to a CheckBoxFor in ASP.NET MVC razor, but it is never called.

I have something like this, which does not work:

<script type="text/javascript">
    function setCompleteStatus() {
        alert("setCompleteStatus called");
    }
</script>

@Html.CheckBoxFor(m => m.Process.IsComplete, 
                  new Dictionary<string, object>{
                     {"id", "p1isCompleted"}, 
                     {"onclick","setCompleteStatus()"}, 
                     {"data-role", "flipswitch"}, 
                     {"data-on-text", "complete"}, 
                     {"data-off-text", "incomplete"}, 
                     {"data-wrapper-class", "custom-size-flipswitch"}})

This attempt also doesn't work:

<script type="text/javascript">
    $("#p1isCompleted").click(
        function setCompleteStatus() {
            alert("setCompleteStatus called");
        }
    );
</script>

This approach leads to the alert being called once when the page is loaded but not when I click on the checkbox:

<script type="text/javascript">
    $(document).ready(
        $("#p1isCompleted").click(
            alert("setCompleteStatus called");
        )
    );
</script>

Because of the data- attributes I cannot use a dictionary like this: new {@onclick, "setCompleteStatus('1')"}

By the way, there are no javascript errors displayed in Firefox's console

Answer 1

You can do it by modify your {"onclick", "setCompleteStatus()"} code to {"onclick","setCompleteStatus.call(this)"} and get advantage of this variable. It should be like this:

@Html.CheckBoxFor(m => m.Process.IsComplete,
                  new Dictionary<string, object>{
                     {"id", "p1isCompleted"},
                     {"onclick","setCompleteStatus.call(this)"},
                     {"data-role", "flipswitch"},
                     {"data-on-text", "complete"},
                     {"data-off-text", "incomplete"},
                     {"data-wrapper-class", "custom-size-flipswitch"}})

<script type="text/javascript">
    function setCompleteStatus() {
        alert(this.checked);
    }
</script>

Answer 2

In MVC, use underscore(_) instead of Hyphen(-) for data* attributes

Just pass the html attributes parameter as anonymous object shown below for CheckBoxFor.

 @Html.CheckBoxFor(m => m.Process.IsComplete, 
              new {
                   @id="p1isCompleted", 
                   @onclick="setCompleteStatus()", 
                   @data_role="flipswitch",
                 }

Answer 3

Try to do:

$(document).ready(function() {
    $("#p1isCompleted").click(function() {
        alert("setCompleteStatus called");
    });
});

Answer 4

I was having a similar issue where the onclick function was not running on IE11, but it was running on Chrome.

What ended up working for me was something like you stated above that you said did not work for you:

<script type="text/javascript">
    $("#p1isCompleted").click(
        function setCompleteStatus() {
            alert("setCompleteStatus called");
        }
    );
</script>

but you need to make sure that if you declare it using jQuery, you DO NOT also have it in your control definition

@Html.CheckBoxFor(m => m.Process.IsComplete, 
                  new Dictionary<string, object>{
                     {"id", "p1isCompleted"}, 
                     {"onclick","setCompleteStatus()"}, 
                     {"data-role", "flipswitch"}, 
                     {"data-on-text", "complete"}, 
                     {"data-off-text", "incomplete"}, 
                     {"data-wrapper-class", "custom-size-flipswitch"}})

Therefore a combination of

@Html.CheckBoxFor(m => m.Process.IsComplete, 
                  new Dictionary<string, object>{
                     {"id", "p1isCompleted"}, 
                     {"data-role", "flipswitch"}, 
                     {"data-on-text", "complete"}, 
                     {"data-off-text", "incomplete"}, 
                     {"data-wrapper-class", "custom-size-flipswitch"}})

(without the "onclick" attribute) and

<script type="text/javascript">
    $("#p1isCompleted").click(
        function setCompleteStatus() {
            alert("setCompleteStatus called");
        }
    );
</script>

might work for you.

Answer 5

The following code works in MVC5:

$('#checkboxId').click(function () {
    //add code here
 });

Answer 6

好吧，谢谢你的帮助，伙计们，但我发现在处理jquery移动翻转开关时应该使用onchange事件，现在它可以工作了。