第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

如何根據(jù)選中的復選框禁用復選框？

如何根據(jù)選中的復選框禁用復選框？

瀟瀟雨雨 2023-09-28 09:45:48
根據(jù)所選內(nèi)容，某些字段需要禁用。如果選擇了 isTest 和 isFunctional，則應禁用 isTimed 和反向。如果選擇 isTimed，則應禁用 isTest 和 isFunctional。檢查代碼：      <div class="checkbox">        <label for="waiting"> waiting </label>        <input class="input-control checkbox-box" [attr.disabled]="vajica" (change)="checkboxChanged($event)" formControlName="isTest" name="waiting" id="waiting"          type="checkbox">      </div>      <div class="checkbox">        <label for="functional"> functional </label>        <input class="input-control checkbox-box" [attr.disabled]="vajica" (change)="checkboxChanged($event)" formControlName="isFunctional" name="functional" id="functional"          type="checkbox">      </div>      <div class="checkbox">        <label for="test"> test </label>        <input class="input-control checkbox-box" [attr.disabled]="testica" (change)="checkboxChanged($event)" formControlName="isTimed" name="test" id="test" type="checkbox">      </div>  vajica: boolean = false;  testica: boolean = false;        checkboxChanged(e){        console.log(e.target);        console.log(this.exerciseAddForm);             if(this.exerciseAddForm.value.isTimed){          alert('true')          this.vajica = true;        }        if(this.exerciseAddForm.value.isTest ||this.exerciseAddForm.value.isFunctional) {          this.testica = true;        }      }
查看完整描述

3 回答

?
慕森王

TA貢獻1777條經(jīng)驗 獲得超3個贊

我應該假設你正在使用反應形式并且你有一些類似的


myForm=new FormGroup({

  isTest:new FormControl(),

  isFunctional:new FormControl(),

  isTimed:new FormControl()

})

所以，你有


更新后我們需要注意“disabled”，如果我們寫 [attr.disabled]="true" 或寫 [attr.disabled]="false"，有些會被禁用，所以如果條件為 false，我們需要該值必須為空


[attr.disabled]="(condition) || null"

剛剛更正


    <form [formGroup]="myForm">

          <div class="checkbox">

            <label for="waiting"> waiting </label>

            <input class="input-control checkbox-box" formControlName="isTest" 

              [attr.disabled]="myForm.get('isTimed').value|| null"

              name="waiting" id="waiting"

              type="checkbox">

          </div>

    

          <div class="checkbox">

            <label for="functional"> functional </label>

            <input class="input-control checkbox-box" formControlName="isFunctional" 

              [attr.disabled]="myForm.get('isTimed').value || null"

              name="functional" id="functional"

              type="checkbox">

          </div>

    

          <div class="checkbox">

            <label for="test"> test </label>

            <input class="input-control checkbox-box" formControlName="isTimed" name="test" 

             [attr.disabled]="(myForm.get('isTest').value && myForm.get('isFunctional').value) || null" 

             id="test" type="checkbox">

          </div>

    

    </form>

查看 .ts 中沒有（更改）事件或代碼。這使得如果您通過代碼更改表單的值，例如使用 pathValue


myForm.patchValue({isTest:true,isTimed:false})

根據(jù)新值啟用“復選框”。


更新了 2但這并沒有改變?yōu)?true 值，所以我們需要使用“change”。但在reactiveForms中我們可以做一些比使用change: subscribe to更好valueChanges的控件。由于我們不想采用樹訂閱，因此我們將使用 rxjs combineLastest(*) 并編寫


   combineLatest(

      this.myForm.get("isTest").valueChanges.pipe(startWith(this.myForm.value.isTest)),

      this.myForm.get("isFunctional").valueChanges.pipe(startWith(this.myForm.value.isFunctional)),

      this.myForm.get("isTimed").valueChanges.pipe(startWith(this.myForm.value.isTimed))

    )

      .subscribe(([isTest, isFunctional, isTimed]: [any, any, any]) => {

        const timedCtr = this.myForm.get("isTimed");

        const testCtr = this.myForm.get("isTest");

        const functionalCtr = this.myForm.get("isFunctional");

        if (isTimed) {

          testCtr.disable({ emitEvent: false });

          functionalCtr.disable({ emitEvent: false });

          testCtr.setValue(false, { emitEvent: false });

          functionalCtr.setValue(false, { emitEvent: false });

        } else {

          testCtr.enable({ emitEvent: false });

          functionalCtr.enable({ emitEvent: false });

        }

        if (isTest && isFunctional) {

          timedCtr.disable({ emitEvent: false });

           timedCtr.setValue(false, { emitEvent: false });

        } else timedCtr.enable({ emitEvent: false });

      });

  }

你可以在 stackblitz 中看到兩種方式


(*)combineLastest (observable1,observable2,...).subscribe([response1,response2,..]) 使我們在response1中得到observable1的響應，在response2中得到observable2的響應......但是我們需要所有的observables都發(fā)出一些值。這就是原因，因為我們需要使用 startWith


查看完整回答
反對 回復 2023-09-28
?
UYOU

TA貢獻1878條經(jīng)驗 獲得超4個贊

首先，我認為了解如何將數(shù)據(jù)綁定到 Angular 中的輸入字段會對您有所幫助。您不需要觸發(fā)更改事件來捕獲和使用 Angular 中的數(shù)據(jù)。在您的情況下，您需要將打字稿文件中的數(shù)據(jù)設置為數(shù)據(jù)，然后可以綁定到輸入字段


isTimed: boolean;

isTest: boolean;

isFunctional: boolean;

對于您的問題，您需要將disabled角度指令（？我忘記它叫什么）添加到字段中input，并附加您需要的條件。例如，假設您正在嘗試禁用該isTimed字段。根據(jù)您的規(guī)則可以執(zhí)行類似以下操作。為了便于閱讀，我縮短了該input字段。


<input type="checkbox" [(ngModel)]="isTimed" [disabled]="isTest && isFunctional" />

這會將isTimed變量綁定為您的模型checkbox，因此當您單擊時，input checkbox isTimed將被設置為 true，而不需要觸發(fā)任何更改事件。這里的指令[disabled]將持續(xù)監(jiān)視isTest并在兩者都為真時isFunctional禁用輸入。isTimed


根據(jù)您使用的 Angular 版本，語法會有所不同，因此我會查找如何為您的 Angular 版本“禁用有條件的輸入字段”。再次查看如何將數(shù)據(jù)綁定到輸入字段。這會讓你的工作變得更加輕松


查看完整回答
反對 回復 2023-09-28
?
慕的地6264312

TA貢獻1817條經(jīng)驗 獲得超6個贊

這是一個簡單的解決方案。通過添加此監(jiān)聽每個復選框將解決您的問題：


function checkClick(){

??

? let isFunctional = document.getElementById('functional')

? let isTest = document.getElementById('waiting')

? let isTimed = document.getElementById('test')


? if(isTest.checked && isFunctional.checked){

? ? isTimed.checked = false

? ? isTimed.disabled = true

? }else if(isTimed.checked){

? ? isFunctional.checked = false

? ? isFunctional.disabled = true

? ? isTest.checked = false

? ? isTest.disabled = true

? }else{

? ? isFunctional.disabled = false

? ? isTimed.disabled = false

? ? isTest.disabled = false

? }

??

}

您必須牢記所有限制情況。取消選中時，您需要啟用其他復選框等。


查看完整回答
反對 回復 2023-09-28
  • 3 回答
  • 0 關注
  • 134 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號