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

Posted 2023-03-27

【中文标题】如何在 JQUERY 中订阅 MVC 复选框更改事件

【英文标题】：How to subscribe to an MVC checkbox change event in JQUERY

【发布时间】：2015-04-01 13:52:10

【问题描述】：

我正在尝试使用 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>

但是在调试中，当我选中/取消选中该框时，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>

【问题讨论】：

注意：prop('checked') 返回一个布尔值！不需要== 'true'

请显示您的页面 html（最好是浏览器输出而不是源代码，因为这会使 JSFiddle 更容易生成）:)

你的 html 是动态渲染的吗（ajax）？

只需删除== 'true' 就足以让您的代码正常工作，但我建议使用带有布尔值的slideToggle 来清理代码请参阅工作示例 下面。

HTML 是什么样的？您是否有机会购买 id 为 IsMonday 的两个元素？

【参考方案1】：

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

prop('checked') 返回一个布尔值！不需要== '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 是默认值，如果没有其他更接近/方便的方法）

例如

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

【讨论】：

但这不能解决事件未触发的问题

@Krishna：这是解决办法...在同一个 JSFiddle 中尝试原始代码，它不会工作 :)

根据 OP，RunsOnMondays() 方法没有触发

@SelectDistinct：记住true != 'true' :)

@Krishna：我添加了一个委托事件选项，但是当我听到蹄声时我不认为斑马：P

【参考方案2】：

你可以如下使用：

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


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

jsFiddle

【讨论】：

不是说这是错，但是为什么要改成click呢？如果匿名函数的唯一工作是传递选中的参数，$('#IsMonday').click(RunsOnMondays); 也可能会短一些。

@RGraham 是的，同意，在你回答之前我已经改变了。

我应该多加注意:)

@RGraham 我应该在回答时。 :)