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

Question

如何禁用 div 并仅在选择单选按钮选项后才激活它？

我可以使用hidden隐藏并在选择选项时显示div，但hidden不是所需的属性。

有人知道可能的解决方案吗？

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

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

  }

Answer 1

您可以设置pointer-events: none来防止点击。

组件 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">

组件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)
}

如果show为true，则可以点击。如果它是假的，你就不能。

<小时/>

编辑:以下是其工作原理的示例: https://ng-run.com/edit/Kzn3ChvHWUD4Jxn1cc2r