如何在 JQUERY 中订阅 MVC 复选框更改事件
How to subscribe to an MVC checkbox change event in JQUERY
我正在尝试使用 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>
它不起作用的原因是这不是真的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'));
});
您可以按如下方式使用以下内容:
$('#IsMonday').change(function(){
RunsOnMondays(this.checked);
});
function RunsOnMondays(isChecked) {
if (isChecked) {
$('.mondaystartfinish').slideDown();
} else {
$('.mondaystartfinish').slideUp();
}
}
js小提琴
相关文章:
- ASP MVC复选框表单提交问题
- 我无法将 MVC 复选框设置为在 jquery 中选中
- 在ASP.NET MVC 4中显示密码复选框
- 根据MVC列表框和复选框的值更改标记元素
- 如何在 JQUERY 中订阅 MVC 复选框更改事件
- 如何使用 Web 表单(不是 MVC 或 asmx 页面)从 ajax Http POST 获取 c# 服务器端的复选框
- 如何查找选中的复选框并将其传递给 MVC 中的操作结果
- 如何在 MVC 应用程序中单击标签时选中所有复选框
- 如何使用 mvc 控制客户端上的复选框值
- 在 MVC 3 中选中复选框的值不为真
- 如何在 MVC-4 中的编辑模式弹出窗口中获取复选框
- 将 mvc 剃须刀复选框链接到剃须刀文本框
- 无法在 Telerik MVC 中触发复选框更改事件
- ASP MVC:选中复选框值并选中复选框时获取隐藏的输入总和
- MVC 3:如何在选择下拉列表项时更新复选框列表
- 选中复选框时,表中的MVC Razor视图文本不会更新
- 如何在asp.net mvc中从多个分页页面中获取所有选中的复选框
- 基于mvc模型设置html复选框复选值
- MVC中有两个复选框,但每次只允许一个复选框
- MVC 3复选框验证