我正在使用带有 knockoutjs 的 kendoui 小部件作为数据源。我有一个将数据绑定到StartClientFromWebEnabled
可观察变量的复选框。StartClientFromWebEnabled
仅当复选框 ic 选中(为真)时,输入文本框才可见。输入具有必需的属性。我希望仅在选中复选框时触发所需的验证。
这是我的html:
<table>
<tr>
<td><label for="startClientFromWebEnabled">Client Launch From Web:</label></td>
<td><input type="checkbox" id="startClientFromWebEnabled" name="startClientFromWebEnabled" data-bind="checked: StartClientFromWebEnabled, enable: IsEditable" onchange="startClientFromWebToggleRequiredAttribute()" /></td>
</tr>
<tr data-bind="visible: StartClientFromWebEnabled">
<td><label for="mimeType">Protocol:</label></td>
<td>
<input id="mimeType" name="mimeType" data-bind= "value: MimeType, enable: IsEditable" />
<span class="k-invalid-msg" data-for="mimeType"></span>
</td>
</tr>
</table>
我尝试了一些场景,包括onChange event
使用以下 javascript 函数添加和删除所需属性的复选框设置:
startClientFromWebToggleRequiredAttribute = function () {
var checkbox = document.getElementById("startClientFromWebEnabled");
var mimeType = document.getElementById("mimeType");
if (checkbox.checked) {
mimeType.setAttribute("required", "required");
}
else {
mimeType.removeAttribute("required");
}
}
问题是我的应用程序中的许多依赖属性都需要此功能,我的选择是使用一些参数使此函数通用,并使用相应的参数值从 html 调用它,如下所示:
toggleRequiredAttribute = function (checkboxElement, inputElement1, inputElement2 ... ) {
var checkbox = document.getElementById(checkboxElement);
var inputElement1 = document.getElementById(inputElement1);
if (checkbox.checked) {
inputElement1.setAttribute("required", "required");
}
else {
inputElement1.removeAttribute("required");
}
}
<input type="checkbox" id="startClientFromWebEnabled" name="startClientFromWebEnabled" data-bind="checked: StartClientFromWebEnabled, enable: IsEditable" onchange="toggleRequiredAttribute('startClientFromWebEnable', 'mimeType')" />
我真的不喜欢这种情况。我想知道 kendoui 中是否有类似条件验证的东西,只有在满足某些条件时才会触发。也欢迎任何其他建议。