Я новичок в кодировании в 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» и скрыть.

0
Srikanth

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>

enter image description here

Если у вас есть контроль над 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>
58555404