使用多个单选框禁用多个输入字段

Question

我试图在选择第一个单选框时禁用 3 个输入字段，第二个单选按钮启用 SHIFT START 和 END 输入，而第三个启用所有三个。我可以禁用或启用所有输入字段或禁用它们。我现在被困在这里。无法理解如何只启用两个输入。

这里是代码

            <form name="contactForm">


              <div class="form-group">
                <label for="shiftdetails">Select the type of details.</label><br>
                <input type="radio" id="pagerdetails" value="Pager" name="selection" (click)="toggleDiv()" > <label>Pager Details</label><br>
                <input type="radio" id="shiftdetails" value="Shift"name="selection" (click)="toggleDiv(2)">
                <label for="nonbusiness">Shift Details</label>
                <br>
                 <input type="radio" id="additional" name="selection" value="additional" (click)="toggleDiv(1)">
                <label for="additional">Additional/Extra Hours</label><br>
              </div>
      

              <div class="form-group">
                <label for="StartTime">Shift Start Time</label>
                <input type="time" class="form-control" id="StartTime" name="StartTime" required [(ngModel)]="StartTime"
                  value="{{StartTime}}" [disabled]="!isChecked">
              </div>


              <div class="form-group">
                <label for="EndTime">Shift End Time</label>
                <input type="time"  class="form-control" id="EndTime" name="EndTime" aria-describedby="fullNameHelp"
                  required [(ngModel)]="EndTime" value="{{EndTime}}"  [disabled]="!isChecked">
              </div>




              <div class="form-group">

                <label for="Reason">Reason</label>
                <input type="text" class="form-control" id="Reason" name="Reason" aria-describedby="Reason"
                  placeholder="Enter Reason" [(ngModel)]="Reason" value="{{Reason}}" required [disabled]="!isChecked">

              </div>

            

TS 代码

     toggleDiv(x) {
  
      this.isChecked = (x === 1)
  }
    
}

Answer 1

不要只使用 1 个标志 this.isChecked ，您将只剩下 2 个值可以使用，即 true 和 false。

这更像是一个逻辑问题，您可以为每个输入创建一个单独的标志，例如 EnableFirst、EnableSecond等

或者更好地将this.isChecked 替换为具有多个状态a、b 和c 的字符变量，并在您的html 中检查该变量及其对应的状态以适当地切换字段。

Answer 2

您的代码的问题是您使用单个变量 isChecked 来启用或禁用所有输入。

最好有 3 个布尔变量。每个输入一个，并根据所选单选按钮的值修改这些变量中的值。

将这些行添加到您的 .ts 文件中：

export class MyComponent {
  enableReasonInput: boolean;
  enableShiftEndTimeInput: boolean;
  enableShiftStartTimeInput: boolean;
  
  ...

  onTypeOfDetailsChange(newValue) {
    if (newValue === 'Pager') {
      this.enableReasonInput = false;
      this.enableShiftEndTimeInput = false;
      this.enableShiftStartTimeInput = false;
    } else if (newValue === 'Shift') {
      this.enableReasonInput = false;
      this.enableShiftEndTimeInput = true;
      this.enableShiftStartTimeInput = true;
    } else if (newValue === 'additional') {
      this.enableReasonInput = true;
      this.enableShiftEndTimeInput = true;
      this.enableShiftStartTimeInput = true;
    }
  }
}

将.html 更新为以下：

<form name="contactForm">
  <div class="form-group">
    <label>Select the type of details.</label>
    <br />
    <input type="radio" id="pagerdetails" value="Pager" name="selection" (click)="onTypeOfDetailsChange('Pager')">
    <label for="pagerdetails">Pager Details</label>
    <br />
    <input type="radio" id="shiftdetails" value="Shift" name="selection" (click)="onTypeOfDetailsChange('Shift')">
    <label for="shiftdetails">Shift Details</label>
    <br />
    <input type="radio" id="additional" name="selection" value="additional"
      (click)="onTypeOfDetailsChange('additional')">
    <label for="additional">Additional/Extra Hours</label>
    <br />
  </div>

  <div class="form-group">
    <label for="StartTime">Shift Start Time</label>
    <input type="time" class="form-control" id="StartTime" name="StartTime" required [(ngModel)]="StartTime"
      value="{{StartTime}}" [disabled]="!enableShiftStartTimeInput">
  </div>


  <div class="form-group">
    <label for="EndTime">Shift End Time</label>
    <input type="time" class="form-control" id="EndTime" name="EndTime" aria-describedby="fullNameHelp" required
      [(ngModel)]="EndTime" value="{{EndTime}}" [disabled]="!enableShiftEndTimeInput">
  </div>

  <div class="form-group">
    <label for="Reason">Reason</label>
    <input type="text" class="form-control" id="Reason" name="Reason" aria-describedby="Reason"
      placeholder="Enter Reason" [(ngModel)]="Reason" value="{{Reason}}" required [disabled]="!enableReasonInput">
  </div>
</form>