How to enable a disabled text box on checkbox using angular-CodePudding

I have a text box which is disabled using simple disabled html tag. I need to enable it when I click checkbox, again I need to disable it when i uncheck the checkbox.

CodePudding user response：

HTML

<input id="textbox" type="text" name="demo">
<input id="checkbox" type="checkbox" onclick="setInput()" name="demo">

Javascript


function setInput(){
    var textbox = document.getElementById("textbox");
    var checkbox= document.getElementById("checkbox");
    if(checkbox.checked == true){
        textbox .disabled = false;
    }else{
         textbox .disabled = true;
    }
}

Try This

CodePudding user response：

    checkValue = false;
    InputDisabled = true;

    ChangeEvent(){
        if(this.checkValue)
        {
          this.InputDisabled = false;
        } else
        {
          this.InputDisabled = true;
        }
      }

    <label for="">Add text to destination filename?</label>
    <input  type="checkbox" [(ngModel)]="checkValue" (change)="ChangeEvent()" id="flexCheckDefault">
    <label for="">Text</label>
    <input type="text" style="width: 100px;" [disabled]="InputDisabled">

CodePudding user response：

You can use Angular to tell your button to be disabled unless your checkbox is enabled.

To do this use an ngModel in your checkbox and then check it in its input:

<input type="radio" [(ngModel)]="ngModel" /> Check me
<input type="button" [disabled]="!ngModel" />

Let me know for more details.