MVC .NET表单提交复选框标签在Internet Explorer中不起作用

Question

In my .NET MVC application I have a form. This form contains a checkbox with label. If this is pushed, it triggers a controller-method that updates a DB-value (true/false)

Everything works fine in chrome. In IE, it only works when clicking the checkbox, not its label.

<form class="form-horizontal" method="POST" 
 action="/Cards/UpdateCard">

//(Other labels that is not editable)

     <div class="col-xs-12 col-md-3 checkbox">
          <label onclick=" this.form.submit(); " id="xs-lighter">
                @if (paymentCard.AutomaticEmailEnabled)
                {
                    <input class="" type="checkbox" name="SelectedSources" checked="checked" onclick=" this.form.submit(); ">
                }
                else
                {
                    <input class="" type="checkbox" name="SelectedSources"  onclick=" this.form.submit(); ">
                }
                Automatic send mail
           </label>
     </div>
</form>

How can I change this to work in both Chrome and IE?

Answer 1

Try this out with jquery

$('#xs-lighter').click(function() {
 $("#form1").submit();
});

<form class="form-horizontal" method="POST" 
 action="/MyCards/UpdatePaymentcard" id="form1">

//(Other labels that is not editable)

     <div class="col-xs-12 col-md-3 checkbox">
          <label id="xs-lighter">
                @if (paymentCard.AutomaticEmailEnabled)
                {
                    <input class="" type="checkbox" name="SelectedSources" checked="checked" onclick=" this.form.submit(); ">
                }
                else
                {
                    <input class="" type="checkbox" name="SelectedSources"  onclick=" this.form.submit(); ">
                }
                Automatic send mail
           </label>
     </div>
</form>