如何根据角度条件动态启用或禁用单选按钮答案

【问题标题】：How to enable or disable radio buttons dynamically based on condition in angular如何根据角度条件动态启用或禁用单选按钮
【发布时间】：2019-10-29 19:56:30
【问题描述】：

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

每当我选择单选按钮 Radio1 或 Radio2 时，应禁用 Radio3 的子单选按钮 RadioSub1、RadioSub2、RadioSub3。只有当我选择 Radio3 时，才应启用 RadioSub1、RadioSub2、RadioSub3。并且始终需要选择 RadioSub1。请帮忙！！！

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

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


        <div>
        <li>
          <input name="r1" id="r3" 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" value="4" (change)="Change($event)" [attr.disabled]="optionDisable==false || null">
              <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)"  [attr.disabled]="optionDisable==false || null">
                 <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)"  [attr.disabled]="optionDisable==false || null">
                 <label class="custom-control-label" for="subRadio3">RadioSub3</label>&nbsp;
               </li>
              </div>
             </div>

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

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

在ts文件中

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

我在这里使用了 [attr.disabled]。但是还是不行。

【问题讨论】：

标签： angular6

【解决方案1】：

我已经修改了你的代码看看

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

我在 stackblitz 上为您的解决方案创建了一个 Live Exaple Click Here

希望它能解决您的问题。

【讨论】：