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

Adiono · Accepted Answer · 2014-04-28 09:41:56Z

12

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>

answered Apr 28, 2014 at 9:41

Adiono

1,04411 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Murali Murugesan · Accepted Answer · 2016-12-03 07:31:37Z

9

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",
                 }

edited Dec 3, 2016 at 7:31

answered Apr 28, 2014 at 9:33

Murali Murugesan

22.6k18 gold badges76 silver badges123 bronze badges

Comments

Felix · Accepted Answer · 2014-04-28 09:31:30Z

1

Try to do:

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

answered Apr 28, 2014 at 9:31

Felix

38.2k8 gold badges45 silver badges56 bronze badges

1 Comment

Lyndon Over a year ago

this works only if I don't use jquery's data attributes that make the checkbox a flipswitch ([link]api.jquerymobile.com/flipswitch)

bitsalsa · Accepted Answer · 2014-06-18 16:37:34Z

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.

Bogdan Mates · Accepted Answer · 2015-09-02 10:01:21Z

1

The following code works in MVC5:

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

answered Sep 2, 2015 at 10:01

Bogdan Mates

5664 silver badges8 bronze badges

Comments

Lyndon · Accepted Answer · 2014-04-28 10:23:24Z

0

Well, thanks for your help, guys, but I just found out that one should use the onchange event when dealing with a jquery mobile flipswitch and now it works.

answered Apr 28, 2014 at 10:23

Lyndon

1591 gold badge2 silver badges15 bronze badges

Comments

Szynkie · Accepted Answer · 2021-09-22 08:46:14Z

0

Another solution:

@Html.CheckBoxFor(x => item.Atribute, new Dictionary<string, object>{
   {"onclick", String.Format("yourFunction.call(this, '{0}')", item.Id)} 
})

answered Sep 22, 2021 at 8:46

Szynkie

891 silver badge5 bronze badges

Collectives™ on Stack Overflow

onclick in ASP.NET MVC razor CheckBoxFor not working

7 Answers 7

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related