Question

当我单击禁用的复选框时，我想调用一种显示警告烤面包机的方法。

这是我的代码：

    class DatePage(resource.Resource):
        def __init__(self, date_string):
            resource.Resource.__init__(self)
            self.date_str = str(date_string)

        def render_GET(self, request):
            request.responseHeaders.addRawHeader(b"content-type", b"application/json")
            return get_json().encode('utf-8')

    class PageFactory(resource.Resource):
      def getChild(self, date_string, request):
          return DatePage(date_string)

    class ControlThread(threading.Thread):
        def __init__(self, control_queue, stop_event):
            threading.Thread.__init__(self)
            self.control_queue = control_queue
            self.stop_event = stop_event
            self.site = server.Site(PageFactory())
            self.port = reactor.listenTCP(host_port, self.site)
            reactor.startRunning(False)

        def run(self):
            while not self.stop_event.is_set():
                try:
                    self.process_command(self.control_queue.get_nowait())
                    reactor.iterate()
                except queue.Empty:
                    pass
                time.sleep(0.001)
                reactor.iterate()
            sys.stderr.write("reactor.stop()\n")
            self.port.stopListening()
            reactor.callFromThread(reactor.stop)
            # reactor_thread.join()
            while reactor.running:
                print("running")
                time.sleep(0.1)
            if not reactor.running:
                print("STOPPED!!")

TypeScript代码：

                <label>
                    <input type="checkbox" checked="checked"
                        [(ngModel)]="myCheckbox" 
                        [disabled]="!hasCar"
                        (change)="noCarToastr()"/>
                </label>

Answer 1

您无法在禁用的元素上触发javascript事件。在label元素上添加点击侦听器。

<label (click)="noCarToastr()">
    <input type="checkbox" checked="checked"
        [(ngModel)]="myCheckbox" 
        [disabled]="!hasCar"
        (change)="noCarToastr(); $event.stopPropagation()"/>
        Car
</label>

Answer 2

不使用@Output（change），而是使用@Output（click），因为更改仅在输入值更改时触发。

<label>
    <input type="checkbox" checked="checked"
        [(ngModel)]="myCheckbox" 
        [disabled]="!hasCar"
        (click)="noCarToastr()"/>
</label>

我建议您使用棱角材质，因为它可以提供其他更直观的选择。

希望这会有所帮助，

Answer 3

Disabled元素不会触发鼠标事件，因此除了禁用该功能之外，还请仅基于hasCar属性值阻止单击操作，这将阻止选中该复选框。为防止该操作，请使用Event参考和Event#preventDefault方法。

模板：

<label for="abc">test
    <input id="abc" type="checkbox" checked="checked"
        [(ngModel)]="myCheckbox" 
        (click)="noCarToastr($event, hasCar)"
        />
</label>

组件：

noCarToastr(event: Event) {
  let me = this;
  if (!this.hasCar) {
    event.preventDefault()
    me.toastr.warning("No Car Available");
  }
}

DEMO

禁用时的Angular 6复选框单击事件

3 个答案: