Angular6 如何在angular中根据条件动态启用或禁用单选按钮

我已经创建了一组单选按钮。有3个单选按钮Radio1、Radio2、Radio3。以及具有子单选按钮即RadioSub1、RadioSub2、RadioSub3的Radio3。我想做的是

每当我选择单选按钮Radio1或Radio2时，Radio3的子单选按钮即RadioSub1、RadioSub2、RadioSub3应禁用。只有在选择Radio3时，才应启用RadioSub1、RadioSub2和RadioSub3。并且始终需要选择RadioSub1。任何帮助plz

---

我在这里使用了[attr.disabled]。但它仍然不起作用。

我已经修改了您的代码，请看一看

<div>
<div>
<ul>
        <li>
          <input name="r1" #tradio1 id="r1" class="custom-control-input" type="radio" [value]="0" (change)="Change($event, tradio1)">
          <label class="custom-control-label" for="r1">Radio1</label>&nbsp;
        </li>

        <li>
          <div class="mb-2">
            <input name="r1" #tradio2 id="r2" [value]="1" class="custom-control-input" type="radio" (change)="Change($event,tradio2)" >
          <label class="custom-control-label" for="r2">Radio2</label>
          </div>
        </li>

        <div>
        <li>
          <input name="r1" id="r3" #tradio3 class="custom-control-input" type="radio" value="2" (change)="Change($event)">
          <label class="custom-control-label" for="r3">Radio3</label>&nbsp;
          <ul>

            <li>
              <input name="subRadio" id="subRadio1" class="custom-control-input" type="radio" [checked]="tradio3.checked == true? true : false" value="4" (change)="Change($event)"[disabled] ="tradio1.checked == true || tradio2.checked == true">
              <label class="custom-control-label" for="subRadio1">RadioSub1</label>&nbsp;
            </li>
            <div class="row">
                <div class="col-md-4">
               <li>
                 <input name="subRadio" id="subRadio2" class="custom-control-input" type="radio" value="5" (change)="Change($event)" [disabled]="tradio1.checked == true || tradio2.checked == true">
                 <label class="custom-control-label" for="subRadio2">RadioSub2</label>&nbsp;
               </li>

               <li>
                 <input name="subRadio" id="subRadio3" class="custom-control-input" type="radio" value="6" (change)="Change($event)"  [disabled]="tradio1.checked == true || tradio2.checked == true" >
                 <label class="custom-control-label" for="subRadio3">RadioSub3</label>&nbsp;
               </li>
              </div>
             </div>
          </ul>
        </li>
        </div>

      </ul>
    </div>
  </div>

无线电1


无线电2


无线电3


无线电潜艇1


无线电潜艇2


无线电潜艇3

我已经为您在stackblitz上的解决方案创建了一个实例

希望它能解决你的问题

Change(event){
if(event.target.value===2){
this.optionDisable=true;
}
}

<div>
<div>
<ul>
        <li>
          <input name="r1" #tradio1 id="r1" class="custom-control-input" type="radio" [value]="0" (change)="Change($event, tradio1)">
          <label class="custom-control-label" for="r1">Radio1</label>&nbsp;
        </li>

        <li>
          <div class="mb-2">
            <input name="r1" #tradio2 id="r2" [value]="1" class="custom-control-input" type="radio" (change)="Change($event,tradio2)" >
          <label class="custom-control-label" for="r2">Radio2</label>
          </div>
        </li>

        <div>
        <li>
          <input name="r1" id="r3" #tradio3 class="custom-control-input" type="radio" value="2" (change)="Change($event)">
          <label class="custom-control-label" for="r3">Radio3</label>&nbsp;
          <ul>

            <li>
              <input name="subRadio" id="subRadio1" class="custom-control-input" type="radio" [checked]="tradio3.checked == true? true : false" value="4" (change)="Change($event)"[disabled] ="tradio1.checked == true || tradio2.checked == true">
              <label class="custom-control-label" for="subRadio1">RadioSub1</label>&nbsp;
            </li>
            <div class="row">
                <div class="col-md-4">
               <li>
                 <input name="subRadio" id="subRadio2" class="custom-control-input" type="radio" value="5" (change)="Change($event)" [disabled]="tradio1.checked == true || tradio2.checked == true">
                 <label class="custom-control-label" for="subRadio2">RadioSub2</label>&nbsp;
               </li>

               <li>
                 <input name="subRadio" id="subRadio3" class="custom-control-input" type="radio" value="6" (change)="Change($event)"  [disabled]="tradio1.checked == true || tradio2.checked == true" >
                 <label class="custom-control-label" for="subRadio3">RadioSub3</label>&nbsp;
               </li>
              </div>
             </div>
          </ul>
        </li>
        </div>

      </ul>
    </div>
  </div>