禁用 div 并仅在选择单选按钮选项时启用

Question

How can I disable a div and activate it only after choosing a radio button option?

I can hide with hidden and show div when an option is selected, but hidden is not the desired property.

Does anyone know a possible solution?

<div class="col-s" [hidden]="show">

onValueChanged(c){
    if(c!=null){
      this.id= c.value.ID;
      this.show=false;
    }

  }

Answer 1

You could do it with *ngIf="show" .

<div class="col-s" *ngIf="show">

onValueChanged(c) {
  if(c! = null) {
    this.id = c.value.ID;
    this.show = false;
  }
}

Answer 2

You can set the pointer-events: none to prevent clicking.

component html

<div class="col-s" [ngStyle]="{'pointer-events': !show ? 'none' : 'initial' }">
  this button is only clickable if you choose -> show
  <button>click</button>
</div>

<label for="showtrue">show</label>
<input id="showtrue" type="radio" name="show" [value]="true" [(ngModel)]="show">

<br />

<label for="showfalse">dont't show (not clickable)</label>
<input id="showfalse" type="radio" name="show" [value]="false" [(ngModel)]="show">

component ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // if you want initial false, change it here
  show = true; // initial true (div is clickable)
}

if show is true, you can click. If it is false, you can't.

---

edit: here is an example how it works: https://ng-run.com/edit/Kzn3ChvHWUD4Jxn1cc2r