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

Question

我是 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”并隐藏。

Answer 1

如果您可以控制 HTML，我建议您使用属性和 class 绑定来创建元素之间的关系。 例子：

 $('.yes_no_radio').change(function(){ var targetClass = $(this).data('bind-to'); var targets = $('.' + targetClass); //or $(this).closest('form').find('.' + targetClass) //convert to int then bool targets.toggle(.;+this;value); });

 .hide { display:none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <label> Yes <input type="radio" class="yes_no_radio" data-bind-to="some_class" value="1" name="yes_no"> </label> <label> No <input type="radio" class="yes_no_radio" data-bind-to="some_class" value="0" name="yes_no"> </label> <div> <div> FIELD A </div> <div class="some_class hide"> FIELD B </div> <div> FIELD C </div> <div class="some_class hide"> FIELD D </div>

Answer 2

使用 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>