Disable Multiple input fields using multiple radio boxes

user_13069035 0
Viewed 255

I am trying to disable the 3 Input fields when 1st radio box selected, 2nd radio button enables SHIFT START and END input while the third enables all the three. I am able to disable or enable either all input fields or disable them. I am stuck here now. Cannot understand how to enable only two inputs.

Here is the code

            <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 CODE

     toggleDiv(x) {
  
      this.isChecked = (x === 1)
  }
    
}
angular html javascript
2 Answers

Do not use just 1 flag this.isChecked , you'll be left with only 2 values to play around with i.e true and false.

This is more of a logical problem , you can create a separate flag for each input like EnableFirst , EnableSecond , etc.

Or even better have this.isChecked replaced with a character variable with multiple states a,b and c and check in your html for this variable and its corresponding state to toggle fields appropriately.

user_54457540

The problem with your code is that you are using a single variable isChecked to enable or disable all the inputs.

It is better to have 3 boolean variables. One for each input and modify the values in those variables based on the value of the selected radio button.

Add these lines to your .ts file:

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;
    }
  }
}

Update the .html to below:

<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>
user_63039290
Related