时间戳

首页 > 解决方案 > 基于 SharePoint 365 中的单选按钮隐藏/显示文本框

javascript - 基于 SharePoint 365 中的单选按钮隐藏/显示文本框

问题描述

我是 SharePoint 编码的新手。我创建了一个具有多个单选按钮的表单。我想根据单选按钮选择隐藏或显示文本框。

1) 字段名称：这是一个紧急请求吗

2) 单选按钮选项：是/否

3) 字段名称：紧急理由

如果用户选择是，我希望字段 3) 显示，否则隐藏。我在脚本编辑器中添加了以下代码并且运行良好。

现在的问题是，我有另一个具有相同是/否选项的字段以及如何为此扩展代码：

4) 字段名称：这是关键客户吗

5) 单选按钮选项：是/否

6) 字段名称：客户的简要描述

如果用户选择是，我希望字段 6) 显示，否则隐藏。适用于 1) 到 3) 的完美代码

<script src="//code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){  
    $("span[title='Yes']>input").change(function(){
        if($(this).is(":checked")){
            $("nobr:contains('Justification for urgency')").closest('tr').show();

        }    
    });
    $("span[title='No']>input").change(function(){
        if($(this).is(":checked")){
            $("nobr:contains('Justification for urgency')").closest('tr').hide();

        }else{
            $("nobr:contains('Justification for urgency')").closest('tr').hide();

        } 
    });
});
</script>

另外，如果我们将隐藏的文本框设为强制性，并且在隐藏时，是否可以添加一个文本为“NA”并隐藏。

标签： javascriptjquerysharepoint-online

解决方案

使用 Jquery 属性选择器将事件绑定到控件。

示例脚本。

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
        <script type="text/javascript">
            $(function () {
                var tr = $("nobr:contains('Is this an urgent request')").closest('tr');
                $('span[title="Yes"]>input', tr).change(function () {
                    if ($(this).is(":checked")) {
                        $("nobr:contains('Justification for urgency')").closest('tr').show();

                    }
                })
                $('span[title="No"]>input', tr).change(function () {
                    if ($(this).is(":checked")) {
                        $("nobr:contains('Justification for urgency')").closest('tr').hide();

                    }
                })
                var tr2 = $("nobr:contains('Is this critical client')").closest('tr');
                $('span[title="Yes"]>input', tr2).change(function () {
                    if ($(this).is(":checked")) {
                        $("nobr:contains('Brief description of client')").closest('tr').show();

                    }
                })
                $('span[title="No"]>input', tr2).change(function () {
                    if ($(this).is(":checked")) {
                        $("nobr:contains('Brief description of client')").closest('tr').hide();

                    }
                })
            });

    </script>

在此处输入图像描述

更新：

<script type="text/javascript">
    $(function () {
        var tr = $("nobr:contains('Is this an urgent request')").closest('tr');
        $('span[title="Yes"]>input', tr).change(function () {
            if ($(this).is(":checked")) {                    
                $('input[title="Justification for urgency"]', $("nobr:contains('Justification for urgency')").closest('tr')).attr("disabled", false);
                $("nobr:contains('Justification for urgency')").closest('tr').show();

            }
        })
        $('span[title="No"]>input', tr).change(function () {
            if ($(this).is(":checked")) {
                //disable control
                $('input[title="Justification for urgency"]', $("nobr:contains('Justification for urgency')").closest('tr')).attr("disabled", true);
                //set text as NA
                $('input[title="Justification for urgency"]', $("nobr:contains('Justification for urgency')").closest('tr')).text("NA");
                $("nobr:contains('Justification for urgency')").closest('tr').hide();

            }
        })
        var tr2 = $("nobr:contains('Is this critical client')").closest('tr');
        $('span[title="Yes"]>input', tr2).change(function () {
            if ($(this).is(":checked")) {
                $('input[title="Brief description of client"]', $("nobr:contains('Brief description of client')").closest('tr')).attr("disabled", false);
                $("nobr:contains('Brief description of client')").closest('tr').show();

            }
        })
        $('span[title="No"]>input', tr2).change(function () {
            if ($(this).is(":checked")) {
                $('input[title="Brief description of client"]', $("nobr:contains('Brief description of client')").closest('tr')).attr("disabled", true);
                $("nobr:contains('Brief description of client')").closest('tr').hide();


            }
        })
    });

</script>

推荐阅读