如何订阅 JQUERY 中的 MVC 复选框更改事件

Question

我正在尝试使用 jQuery 锁定复选框更改事件，目前我有这个：

<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>

但是在调试中，当我 check/uncheck 盒子时 RunsOnMondays() 方法没有触发。

我也试过用这个，但还是不行：

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

浏览器输出

<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>

Answer 1

它不起作用的原因是这不是真的 true == 'true'实际上是false：http://jsfiddle.net/TrueBlueAussie/2wwz1ore/6/

prop('checked') returns 一个布尔值！不需要 == '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();
    }
}

更好的是，使用 slideToggle()：http://jsfiddle.net/TrueBlueAussie/2wwz1ore/3/

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

如果（我非常怀疑）您的元素是动态添加的，请使用附加到非更改祖先元素的委托事件处理程序（如果没有其他元素，则默认为 document closer/convenient)

例如

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

Answer 2

您可以按如下方式使用：

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


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

jsFiddle

如何订阅 JQUERY 中的 MVC 复选框更改事件

How to subscribe to an MVC checkbox change event in JQUERY

javascript

asp.net

asp.net-mvc

jquery

asp.net-mvc-5