Question

我目前正在处理 2下拉表格，说form1和form2。我在form1点击了某个值列表，其中form2将被禁用，而某些值则不会被禁用。我正在使用TypeScript处理Angular 4。在哪里我可以开始弄清楚如何实现这个目标？

以下是我的表单代码

  <div class="form-group" style="width: 350px">
      <label for="form_periodicity"><b>Periodicity</b></label><br>
      <select class="form-control" id="periodicity" style="width: 222px">
        <option>EOD</option>
        <option>Daily</option>
        <option>Weekly</option>
        <option>Monthly</option>
        <option>Strict run</option>
      </select>
  </div>
  <div class="form-group" style="width: 350px">
      <label for="form_timeofexecution"><b>Time of execution</b></label><br>
      <select class="form-control" id="timeofexecution" style="width: 222px">
        <option>0:00</option>
        <option>0:30</option>
        <option>1:00</option>
        <option>4:00</option>
        <option>5:00</option>
      </select>
  </div>

因此，当从第一个表单中选择严格运行时，我想禁用第二个表单组。

Answer 1

您可以使用简单的JS事件侦听器执行此操作。

我认为这就是你想做的事情：

window.addEventListener('load', function(){
  document.getElementById('periodicity').addEventListener('click', function(e){
    if(e.target.value == 'Strict run' )
      document.getElementById('dayofexecution').disabled = true;
    else
      document.getElementById('dayofexecution').disabled = false;
  })
});

  <div class="form-group" style="width: 350px">
      <label for="form_periodicity"><b>Periodicity</b></label><br>
      <select class="form-control" id="periodicity" style="width: 222px">
        <option>EOD</option>
        <option>Daily</option>
        <option>Weekly</option>
        <option>Monthly</option>
        <option>Strict run</option>
      </select>
  </div>
  <div class="form-group" style="width: 350px">
      <label for="form_dayofexecution"><b>Time of execution</b></label><br>
      <select class="form-control" id="dayofexecution" style="width: 222px">
        <option>0:00</option>
        <option>0:30</option>
        <option>1:00</option>
        <option>4:00</option>
        <option>5:00</option>
      </select>
  </div>

Answer 2

在第一个选择中，您可以触发一个可以处理此事件的变更事件的函数

<select class="form-control" id="periodicity" (change)="onChange($event)" style="width: 222px">
  <option>EOD</option>
  <option>Daily</option>
  <option>Weekly</option>
  <option>Monthly</option>
  <option value="0">Strict run</option>
</select>

并在ts文件中定义一个布尔变量，并在更改事件上更改其值，如此

disableSelect:bolean
 onChange(e){
 let chosen= parseInt((<HTMLSelectElement>e.srcElement).value);
 if(chosen.value==0){
  this.disableSelect=true;
   return;
 }
this.disableSelect=false;
}

并在你的第二个选择绑定像这样的布尔变量

<select class="form-control" id="dayofexecution" [disabled]="disableSelect" style="width: 222px">

根据其他表单的输入禁用表单

2 个答案: