实现您想要的并不容易,您需要使用客户端编码来完全验证表单并按照您描述为表单要求的方式启用/禁用字段。
最基本的选项是使用列验证公式,你需要制作一大组公式来圈出所有可能的组合值的所有组合选项,这并不难,但需要现在是正确编写每个单独公式的好时机。
现在让我们谈谈第二个选项,这是最好的一个,我已经编写了一个功能齐全的解决方案来解决您的问题,您现在所要做的就是复制并粘贴到您的 EditForm.aspx 和 NewForm.aspx ,不要忘记更改各自的字段名称。
在下图中,您会看到我的表单根据 Column1 上选择的选项启用和禁用字段,如果选择“YES”,则启用 Option1 和 Option2 并以红色突出显示(根据需要),使用在两个字段都填满之前无法保存数据,当用户将 Column1 更改为“NO”时也是如此,表单会将焦点从 Option1 和 Option2 移开,将它们变为灰色并突出显示 Option3 和 Option4。
基于相同的代码,您甚至可以禁用“保存”按钮,为用户提供更专业的用户界面,这非常初级且相当长,但我这样编码是为了帮助您而不是炫耀任何技能:)
一步一步来:
1) 从https://jquery.com/download/ 下载 JQuery 库并上传到您的 SharePoint 中“Scripts”文件夹内的文档库样式库中
2) 使用 SharePoint Designer 打开 NewForm.aspx 或 EditForm.aspx(在高级模式下编辑文件)
3) 在本节之后粘贴解决方案代码:
<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
上面的屏幕截图显示了我的自定义代码从哪里开始,最终看起来像下面的两张图片:
4) 此代码不会显示任何有关验证字段的消息,而是会在浏览器的控制台窗口上打印日志消息,按 F12 键,您会收到字段验证的警告消息,如下面的屏幕截图所示:
5) 最后但同样重要的是,在脚本中有一个指向 JQuery 库位置的条目,您需要更改 http://your-domain-name/Style%20Library/Scripts/jquery-3.2.1.min.js 以反映您自己的地址而不是我的地址。
从上面的步骤可以看出,代码功能齐全,您只需要更改字段名称即可。
祝你好运,希望你今天学到了一些新东西。
<!-- custom code -->
<script type="text/javascript" src="http://portal.overlord.local:8080/Style%20Library/Scripts/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready( function(){
// will set the respective columns for YES
$("input[Title='Option1']").change( function() {
var isEmpty = $("input[Title='Option1']").val() == '' && $("select[Title*='Column1'] option:selected").text() == 'YES';
$("input[Title='Option1']").css("border", isEmpty ? "1px solid red" : "1px solid gray");
}).trigger("change");
$("input[Title='Option2']").change( function() {
var isEmpty = $("input[Title='Option2']").val() == '' && $("select[Title*='Column1'] option:selected").text() == 'YES';
$("input[Title='Option2']").css("border", isEmpty ? "1px solid red" : "1px solid gray");
}).trigger("change");
// will set the respective columns for NO
$("input[Title='Option3']").change( function() {
var isEmpty = $("input[Title='Option3']").val() == '' && $("select[Title*='Column1'] option:selected").text() == 'NO';
$("input[Title='Option3']").css("border", isEmpty ? "1px solid red" : "1px solid gray");
}).trigger("change");
$("input[Title='Option4']").change( function() {
var isEmpty = $("input[Title='Option4']").val() == '' && $("select[Title*='Column1'] option:selected").text() == 'NO';
$("input[Title='Option4']").css("border", isEmpty ? "1px solid red" : "1px solid gray");
}).trigger("change");
//
// set the on change event for the drop down
//
$("select[Title*='Column1']").change( function() {
var State = $("select[Title*='Column1'] option:selected").text() == 'YES' ? false : true;
$("input[Title='Option1']").prop("disabled", State).trigger("change");
$("input[Title='Option2']").prop("disabled", State).trigger("change");
$("input[Title='Option3']").prop("disabled", !State).trigger("change");
$("input[Title='Option4']").prop("disabled", !State).trigger("change");
}).trigger("change"); // it triggers itself to call itself to enable/disable the fields
});
function PreSaveAction()
{
var State = $("select[Title*='Column1'] option:selected").text() == 'YES' ? false : true;
if (!State )
{
if ( $("input[Title='Option1']").val() == '' || $("input[Title='Option2']").val() == '' )
{
console.log('Option1 or Option2 are empty');
return false;
}
else
{
console.log('Option1 and Option2 were filled, all good!');
return true;
}
}
else
{
if ( $("input[Title='Option3']").val() == '' || $("input[Title='Option4']").val() == '' )
{
console.log('Option3 or Option4 are empty');
return false;
}
else
{
console.log('Option3 and Option4 were filled, all good!');
return true;
}
}
}
</script>
<!-- end of custom code -->