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，建议您使用属性和类绑定在元素之间创建关系。示例：

$('.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>

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

2 个答案: