Question

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

每当我选择单选按钮Radio1或Radio2时，应该禁用Radio3的子单选按钮，即RadioSub1，RadioSub2，RadioSub3。和RadioSub1，RadioSub2，RadioSub3仅在我选择Radio3时才启用。而且总是需要选择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]。但仍然无法正常工作。

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

希望它可以解决您的问题。

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

1 个答案: