Как сбросить / отключить переключатели при выборе ввода текста («Другое»)? - PullRequest
Новая
       56

Как сбросить / отключить переключатели при выборе ввода текста («Другое»)?

0 голосов
/ 26 января 2020

У меня есть форма, в которой пользователь может выбирать между: «7 дней», «14 дней», «30 дней» и полем ввода текста «Другое»: 

<div class="form-group">
          <label for="paymentperiod">Payment period</label>
          <div class="col-5">
        <div class="radio">
              <label><input type="radio" name="paymentperiod" formControlName="paymentperiod" value="week" >7 days </label>
        </div>
        <div class="radio">
          <label><input type="radio" name="paymentperiod"  formControlName="paymentperiod" value="tweeweken">14 days</label>
        </div>
        <div class="radio">
          <label><input type="radio" name="paymentperiod" formControlName="paymentperiod" value="vierweken" >30 days</label>
        </div>

      </div>
      <div class="col-5">
        Other:
        <input  [ngClass]="{'is-invalid': (form.controls.paymentperiod.errors && form.controls.paymentperiod.dirty), 'is-valid': !form.controls.paymentperiod.errors}"
                id="paymentperiod"  class="form-control" type="text" name="paymentperiod" autocomplete="off" placeholder="Other" formControlName="paymentperiod"/>
        <ul class="help-block">
          <li *ngIf="form.controls.paymentperiod.errors?.required && form.controls.paymentperiod.dirty">This field is required</li></ul>

      </div>
    </div>


<div class="form-group">
  <label for="kmfacturatie">kmfacturatie</label>
  <div class="col-5">
    <div class="radio">
      <label><input type="radio" name="kmfacturatie" formControlName="kmfacturatie" value="ja" >true</label>
    </div>
    <div class="radio">
      <label><input type="radio" name="kmfacturatie"  formControlName="kmfacturatie" value="nee">false</label>
    </div>
  </div>
</div>

Однако я хочу, чтобы радио-блоки были сброшены или отключены, когда пользователь нажимает на поле «Другое», чтобы пользователь не путался. Как мне этого добиться? Поэтому, если пользователь нажимает кнопку-переключатель, поле ввода текста также сбрасывается. Я просмотрел несколько страниц, но это не помогло. Заранее спасибо:)

Ответы [ 2 ]

1 голос
/ 27 января 2020

Здравствуйте, вы можете использовать Jquery, чтобы сделать это здесь, код работает отлично. Я пробую это, вам нужно поместить библиотеку jquery в ту же папку html страницы 

<div class="form-group">
  <label for="paymentperiod">Payment period</label>
  <div class="col-5">
    <div class="radio">
      <label><input type="radio" name="paymentperiod" formControlName="paymentperiod" value="week" class="boutton">7
        days </label>
    </div>
    <div class="radio">
      <label><input type="radio" name="paymentperiod" formControlName="paymentperiod" value="tweeweken"
          class="boutton">14 days</label>
    </div>
    <div class="radio">
      <label><input type="radio" name="paymentperiod" formControlName="paymentperiod" value="vierweken"
          class="boutton">30 days</label>
    </div>

  </div>
  <div class="col-5">
    Other:
    <input
      [ngClass]="{'is-invalid': (form.controls.paymentperiod.errors && form.controls.paymentperiod.dirty), 'is-valid': !form.controls.paymentperiod.errors}"
      id="paymentperiod" class="form-control" type="text" name="paymentperiod" autocomplete="off" placeholder="Other"
      formControlName="paymentperiod" />
    <ul class="help-block">
      <li *ngIf="form.controls.paymentperiod.errors?.required && form.controls.paymentperiod.dirty">This field is
        required</li>
    </ul>

  </div>
</div>


<div class="form-group">
  <label for="kmfacturatie">kmfacturatie</label>
  <div class="col-5">
    <div class="radio">
      <label><input type="radio" name="kmfacturatie" formControlName="kmfacturatie" value="ja">true</label>
    </div>
    <div class="radio">
      <label><input type="radio" name="kmfacturatie" formControlName="kmfacturatie" value="nee">false</label>
    </div>
  </div>
</div>
<script src="jquery-3.2.1.js"></script>
<script>
  $(document).ready(function () {
    $(".form-control").focus(function () {
      $(".boutton").attr("disabled", true);
    });
    $(".form-control").blur(function () {
      $(".boutton").attr("disabled", false);
    });
  });
</script>
1 голос
/ 26 января 2020

Вы можете использовать немного javascript, чтобы сделать это. 

function reset(){

let radios = document.getElementsByClassName('radio');
   for(var i = 0; i< radios.length;i++){
      let input = radios[i].getElementsByTagName('input');
      
      if(input[0].name === 'paymentperiod')input[0].checked = false;
   
   }
}

function reset2(){

 document.getElementById('paymentperiod').value = '';

}
<div class="form-group">
          <label for="paymentperiod">Payment period</label>
          <div class="col-5">
        <div class="radio">
              <label><input type="radio" name="paymentperiod" formControlName="paymentperiod" value="week" onclick='reset2()' >7 days </label>
        </div>
        <div class="radio">
          <label><input type="radio" name="paymentperiod"  formControlName="paymentperiod" value="tweeweken" onclick='reset2()'>14 days</label>
        </div>
        <div class="radio">
          <label><input type="radio" name="paymentperiod" formControlName="paymentperiod" value="vierweken" onclick='reset2()'>30 days</label>
        </div>

      </div>
      <div class="col-5">
        Other:
        <input  onclick='reset()'[ngClass]="{'is-invalid': (form.controls.paymentperiod.errors && form.controls.paymentperiod.dirty), 'is-valid': !form.controls.paymentperiod.errors}"
                id="paymentperiod"  class="form-control" type="text" name="paymentperiod" autocomplete="off" placeholder="Other" formControlName="paymentperiod"/>
        <ul class="help-block">
          <li *ngIf="form.controls.paymentperiod.errors?.required && form.controls.paymentperiod.dirty">This field is required</li></ul>

      </div>
    </div>


<div class="form-group">
  <label for="kmfacturatie">kmfacturatie</label>
  <div class="col-5">
    <div class="radio">
      <label><input type="radio" name="kmfacturatie" formControlName="kmfacturatie" value="ja" >true</label>
    </div>
    <div class="radio">
      <label><input type="radio" name="kmfacturatie"  formControlName="kmfacturatie" value="nee">false</label>
    </div>
  </div>
</div>
...