基於 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>