How to subscribe to an MVC checkbox change event in JQUERY

Question

I'm trying to latch onto a checkbox change event using jQuery, currently I have this:

<script type="text/javascript">
    $(document).ready(function () {
        $('.timepicker').datetimepicker({ datepicker: false, format: 'H:i' });
        $('.mondaystartfinish').hide();

        //subscribe to change events
        $('#IsMonday').change(function () {
            RunsOnMondays();
        });
    });

    function RunsOnMondays() {
        if ($('#IsMonday').prop('checked') == 'true') {
            $('.mondaystartfinish').slideDown();
        } else {
            $('.mondaystartfinish').slideUp();
        }
    }    
</script>

However in debug when I check/uncheck the box the RunsOnMondays() method is not firing.

I have tried using this also but still didn't work:

$('IsMonday').prop('checked').change(function () { RunsOnMondays();});

Browser output

<div class="form-group">
    <label class="control-label col-md-2" for="IsMonday">Monday</label>
    <div class="col-md-10">
        <input class="check-box" data-val="true" data-val-required="The IsMonday field is required." id="IsMonday" name="IsMonday" type="checkbox" value="true" /><input name="IsMonday" type="hidden" value="false" />
        <span class="field-validation-valid" data-valmsg-for="IsMonday" data-valmsg-replace="true"></span>
    </div>
</div>

<div class="startfinish">
    <div class="form-group">
        <div class="mondaystartfinish">
            <label class="control-label col-md-2" for="MondayFrom">Monday Start</label>
            <div class="col-md-10">
                <input class="timepicker" data-val="true" data-val-date="The field MondayFrom must be a date." id="MondayFrom" name="MondayFrom" type="text" value="" />
                <span class="field-validation-valid" data-valmsg-for="MondayFrom" data-valmsg-replace="true"></span>
            </div>
        </div>
    </div>
</div>

<div class="startfinish">
    <div class="form-group">
        <div class="mondaystartfinish">
            <label class="control-label col-md-2" for="MondayTo">Monday Finish</label>
            <div class="col-md-10">
                <input class="timepicker" data-val="true" data-val-date="The field MondayTo must be a date." id="MondayTo" name="MondayTo" type="text" value="" />
                <span class="field-validation-valid" data-valmsg-for="MondayTo" data-valmsg-replace="true"></span>
            </div>
        </div>
    </div>
</div>

note: prop('checked') returns a boolean value! No need for == 'true' — iCollect.it Ltd
– iCollect.it Ltd, Commented Feb 2, 2015 at 15:13
Please show your page HTML (preferably browser output and not source as that makes a JSFiddle easier to produce) :) — iCollect.it Ltd
– iCollect.it Ltd, Commented Feb 2, 2015 at 15:14
Just removing == 'true' is enough for your code to work, but I recommend using slideToggle with a boolean value to cleanup the code See working examples below. — iCollect.it Ltd
– iCollect.it Ltd, Commented Feb 2, 2015 at 15:24
What does the HTML look like? Do you buy any chance have two elements with id of IsMonday? — Liam
– Liam, Commented Feb 2, 2015 at 15:25

iCollect.it Ltd · Accepted Answer · 2015-02-02 15:30:38Z

6

The reason it does not work is that this is not true true == 'true' is actually false: http://jsfiddle.net/TrueBlueAussie/2wwz1ore/6/

prop('checked') returns a boolean value! No need for == 'true'.

http://jsfiddle.net/TrueBlueAussie/2wwz1ore/1/

$(document).ready(function () {
    //$('.timepicker').datetimepicker({ datepicker: false, format: 'H:i' });
    $('.mondaystartfinish').hide();

    // subscribe to change events
    $('#IsMonday').change(function () {
        RunsOnMondays();
    });
});

function RunsOnMondays() {
    if ($('#IsMonday').prop('checked')) {
        $('.mondaystartfinish').slideDown();
    } else {
        $('.mondaystartfinish').slideUp();
    }
}

Better yet, use slideToggle(): http://jsfiddle.net/TrueBlueAussie/2wwz1ore/3/

    // subscribe to change events
    $('#IsMonday').change(function () {
        $('.mondaystartfinish').slideToggle($(this).prop('checked'));
    });

If (and I very much doubt it) your element is added dynamically, use a delegated event handler attached to a non-change ancestor element (document is the default if nothing else is closer/convenient)

e.g.

    $(document).on('click' , '#IsMonday', function () {
        $('.mondaystartfinish').slideToggle($(this).prop('checked'));
    });

edited Feb 2, 2015 at 15:30

answered Feb 2, 2015 at 15:18

iCollect.it Ltd

93.9k26 gold badges189 silver badges210 bronze badges

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

9 Comments

Venkata Krishna Over a year ago

But this can't be the fix for the event not firing

iCollect.it Ltd Over a year ago

@Krishna: it is the fix... try the original code in the same JSFiddle and it will not work :)

Venkata Krishna Over a year ago

As per OP, the RunsOnMondays() method is not firing

iCollect.it Ltd Over a year ago

@SelectDistinct: just remember that true != 'true' :)

iCollect.it Ltd Over a year ago

@Krishna: I added a delegated event option, but I don't assume zebras when I hear hooves :P

|

hutchonoid · Accepted Answer · 2015-02-02 15:29:49Z

2

You could use the below as follows:

$('#IsMonday').change(function(){
    RunsOnMondays(this.checked);
});


function RunsOnMondays(isChecked) {
    if (isChecked) {
        $('.mondaystartfinish').slideDown();
    } else {
        $('.mondaystartfinish').slideUp();
    }
}

jsFiddle

edited Feb 2, 2015 at 15:29

answered Feb 2, 2015 at 15:19

hutchonoid

33.4k15 gold badges102 silver badges106 bronze badges

4 Comments

CodingIntrigue Over a year ago

Not that this is wrong, but why change to click? $('#IsMonday').click(RunsOnMondays); might be a bit shorter too if the anonymous function's only job is to pass on the checked parameter.

hutchonoid Over a year ago

@RGraham Yes agreed, I had changed it before you answered.

CodingIntrigue Over a year ago

I should pay more attention :)

hutchonoid Over a year ago

@RGraham I should when answering. :)

Collectives™ on Stack Overflow

How to subscribe to an MVC checkbox change event in JQUERY

2 Answers 2

9 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related