选择文本输入（“其他”）时如何重置/禁用单选按钮？

Question

我有一个表单供用户选择：“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>

但是，我希望在用户单击“其他”字段时重置或禁用单选框，这样用户就不会感到困惑。我怎样才能做到这一点？因此，如果用户单击单选按钮，文本输入字段也会被重置。我看了几页，但没有帮助。在此先感谢:)

Answer 1

您可以使用一些 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>

Answer 2

您好，您可以在这里使用 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>