javascript - 如果其他控件没有值，如何使复选框保持禁用状态，如果控件在 Angular 8 中具有值，则如何使复选框保持禁用状态

Question

我有一个复选框字段，如果其他控件有值，我想在其中启用复选框。这里我有 2 个控件收到的数量和更新。如果更新已接收控件中有值，则必须允许用户在金额字段中 checkin / checkout 。如果更新请求的控件为空/null，则金额复选框必须保持禁用状态，并且不应允许用户 checkin / checkout 。

演示: DEMO

TS:

initEoForm() {
    this.eoInfoForm = this.FB.group({
      amount: ['', Validators.required],
      updateRequested:['']
    });
  }  


  public disableUpdate() {
    let disabled = true;
      if (this.eoInfoForm.value.updateRequested) {
        disabled = false;
        return false;
      }
    return disabled;
  }

HTML:

<form  [formGroup]="eoInfoForm">
  <div class="row">
    <div class="col">
       <div class="custom-control custom-switch">
         {{disableUpdate()}}
                <input type="checkbox" class="custom-control-input" id="noNewBusiness"
                    formControlName="amount"  disabled="disableUpdate()">
                <label class="custom-control-label" for="noNewBusiness">Update Received</label>
            </div>
    </div>
  </div>
</form>

为了查看我在 html 中得到的是 true 还是 false 值，我尝试检查值 {{disableUpdate()}}。它相应地给出 true 或 false 值，但即使我得到 true 我也无法 checkin / checkout 。

Answer 1

我稍微调整了一下，但我做到了。你需要setAttribute()和removeAttribute()。我喜欢避免 if block ，我更喜欢三元运算符。

typing(event){
    let checkBox = document.getElementById('noNewBusiness')
    event.target.value == '' ? checkBox.setAttribute('disabled', 'true') : checkBox.removeAttribute('disabled')
  }

stackblitz