如何使用javascript/jQuery选中/取消选中HTML CheckBoxFor
How to check/uncheck HTML CheckBoxFor with javascript/jQuery
我已经查看了"如何使用Javascript/jQuery选中/取消选中复选框"问题的所有其他答案,他们似乎说要使用:
$("#idSelector").prop('checked', true);
$("#idSelector").prop('checked', false);
然而,由于razor-html辅助对象将第二个输入元素添加到混合中,这会造成复杂性。
$(document).on("click", "input[type='radio']", function() {
$("input[type='radio']").each(function() {
var that = this;
$(this).parent().siblings("#checkBoxArray").find(":checkbox").each(function(i, item) {
$(item).prop('checked', that.checked);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div style="margin-bottom: 50px;">
<div style="clear: both;"></div>
<div style="margin: 25px; margin-top: 15px; margin-bottom: 10px;">
<div id="CheckBoxRow" style="border-bottom: 1px solid lightgrey; padding-bottom: 10px;">
<label>
<input id="holeSizes" name="holeSizes" type="radio" value="4" data-bind="checked:holeSizes">Choice Group One</label>
<div id="checkBoxArray" style="min-height: 18px;">
<div>
<input class="Checkbox1" data-val="true" data-val-required="required." id="one" name="one" type="checkbox" value="true" data-bind="checked:one">
<input name="one" type="hidden" value="false" data-bind="value:one">One</div>
<div>
<input class="Checkbox1" data-val="true" data-val-required="required." id="two" name="two" type="checkbox" value="true" data-bind="checked:two">
<input name="two" type="hidden" value="false" data-bind="value:two">Two</div>
<div>
<input class="Checkbox1" data-val="true" data-val-required="required." id="three" name="three" type="checkbox" value="true" data-bind="checked:three">
<input name="three" type="hidden" value="true" data-bind="value:three">Three</div>
<div>
<input class="Checkbox1" data-val="true" data-val-required="required." id="four" name="four" type="checkbox" value="true" data-bind="checked:four">
<input name="four" type="hidden" value="false" data-bind="value:four">Four</div>
<div>
<input class="Checkbox1" data-val="true" data-val-required="required." id="five" name="five" type="checkbox" value="true" data-bind="checked:five">
<input name="five" type="hidden" value="false" data-bind="value:five">Five</div>
<div>
<input class="Checkbox1" data-val="true" data-val-required="required." id="six" name="six" type="checkbox" value="true" data-bind="checked:six">
<input name="six" type="hidden" value="false" data-bind="value:six">Six</div>
<div>
<input class="Checkbox1" data-val="true" data-val-required="required." id="seven" name="seven" type="checkbox" value="true" data-bind="checked:seven">
<input name="seven" type="hidden" value="false" data-bind="value:seven">Seven</div>
</div>
</div>
</div>
</div>
我已经使用此代码来更改复选框选择状态,根据单击的单选按钮,复选框会显示一个复选框,就像它们被选中一样,但隐藏输入框的基本值不会更改以反映这一点。
我需要使用什么代码来更改可视复选框和隐藏值
更新
我几乎想明白了。有点这些复选框位于Kendo模板中,该模板似乎会自动对每个复选框应用Knockout绑定。
data-bind="checked:one"
因此,单独更改框的视觉外观和隐藏输入的值仍然不能完全起作用。我在另一行中添加了更改数据绑定值的内容,但这仍然太短了一步。我需要更改敲除绑定的模型的值。
有没有一种简单的方法可以更改数据绑定模型的值?
如果您的代码看起来像:
@using(Html.BeginForm......
{
...
@Html.LabelFor(s=>s.idSelector, "idSelector")
@Html.CheckBoxFor(s=>s.idSelector)
...
}
将复选框设置为"已选中"的唯一操作是:
$("#idSelector").prop('checked', true);
此代码用于将复选框的选中状态更改为false(如果为true)。
if ($("#cbName").is(":checked")) {
$("#cbName").click();
}
虽然由于这个问题的年龄,这可能对海报没有帮助,但我希望这将帮助任何像我一样找到这个搜索的人,特别是在编辑网格项目时为Kendo().CheckBoxFor。我可以选中/取消选中listeeeek提到的方式,但由于剑道中隐藏的东西,它绑定的模型没有更新。我在这里添加了第二行来更新型号
$("#CHECKBOXNAME").prop('checked', desiredBool);
$('#GRIDNAME').data().kendoGrid.editable.options.model.CHECKBOXITEM = desiredBool;
希望这能有所帮助。
相关文章:
- 可以't让我的if语句处理js中的html表单输入
- 如何设置html元素填充的动画
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 如何将HTML id分配给元素,以及如何将JavaScript应用于元素
- 如何编写HTML输入的JS内联
- Dojo不解析自定义小部件的模板html中的小部件声明性
- 使用javascript将动态表从一个html页面打印到另一个html页
- 通过javascript重定向html传递php变量
- 如何使Javascript动态html表及其上的事件
- 在chrome.tabs.onCreated之后加载HTML页面
- 如何在vs2002中调试html页面
- 如何使用javascript或html下载PDF格式的填写表单
- 视频HTML没有'无法在Internet Explorer 11上工作
- HTML表单提交时未执行外部函数
- 如何将输入(type=text)从html表单传递到javascript函数
- 使用angular重定向到html页面
- 分析高度属性时出现意外值{{specs.height}}.index.html
- 如何使用javascript/jQuery选中/取消选中HTML CheckBoxFor
- JavaScript无法在@Html.CheckBoxFor上工作
- @HTML.CheckBoxFor()不返回未选中框的值