单选按钮禁用和启用取决于值 angular 6

Question

我正在尝试根据值禁用和启用单选按钮。在我的代码中，如果我在文本框中输入 "yes" 然后单击确定按钮单选按钮一个被禁用。但是如果我不输入单选按钮 2 则不会禁用。我不知道发生了什么。谁能找到我代码中的错误？

https://stackblitz.com/edit/radio-button-gdpwvc?file=src%2Fapp%2Fapp.component.html

clickit(){

if(  this.entervalues=="yes" )  {
this.radio1=true;
}

 if(  this.entervalues=="no" )  {
this.radio2=true;
}

}

Answer 1

你只需要有1个变量来保存单选按钮的值

在 html、

试试这个

    <div class="form-check-inline">
       <label class="form-check-label">
       <input type="radio" class="form-check-input" name="radio" [(ngModel)]="radio1" [disabled]="disabled" [value]="true">Yes
       </label>
     </div>
     <div class="form-check-inline">
       <label class="form-check-label">
       <input type="radio" class="form-check-input" name="radio"  [(ngModel)]="radio1" [disabled]="!disabled" [value]="false">No  
       </label>
     </div>

以及 component.ts、

中的这个

clickit(){
  if(  this.entervalues=="yes" )  {
   this.disabled=true;
  }

  if(  this.entervalues=="no" )  {
    this.disabled=false;
  }
}

Answer 2

您不需要 2 个变量：

  radio;
  entervalues;


  clickit(){
    this.radio = this.entervalues === "yes";
  }

在模板中：

<label class="form-check-label">
     <input type="radio" class="form-check-input" name="radio"  [(ngModel)]="radio" [value]="true">Yes
</label> 
 ...
<label class="form-check-label">
     <input type="radio" class="form-check-input" name="radio"  [(ngModel)]="radio" [value]="false">No
</label>

Answer 3

我检查了你的代码。基本问题是您在 .ts 中将 radio2 值设置为 true，但在 html 中属性绑定到 false。因此，如果与其绑定的模态值为 false，则将选择 radio2。

link for modified code (changed radio2 to false on click if value in text box is no)

单选按钮禁用和启用取决于值 angular 6

Radio button disable and enable depends on values angular 6

angular

angular5

angular6

angular7