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

Question

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

每当我将 select 单选按钮，Radio1 或 Radio2，Radio3 的子单选按钮即 RadioSub1、RadioSub2、RadioSub3 应该禁用。和 RadioSub1、RadioSub2、RadioSub3 应该只在我 select Radio3 时启用。而且 RadioSub1 总是需要 selected。请帮忙!!!

      <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]。但是还是不行。

Answer 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 上为您的解决方案创建了一个实例 Click Here

希望它能解决您的问题。

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

How to enable or disable radio buttons dynamically based on condition in angular

angular6