单击禁用的复选框时，如何执行 function？

Question

我在页面上有一个复选框，该复选框在满足某些条件之前被禁用。

为了向用户提供一些信息，我希望在用户尝试单击禁用的复选框时显示“工具提示”。 我遇到的问题是我无法在复选框上触发 onClick 事件。

这是一些示例代码：

<script>
    function notify() {
        alert("Hello");
    }
</script>

<input type="checkbox" onclick="notify();" id="thisOneWorks"/>
<input type="checkbox" onclick="notify();" id="thisOneDoesnt" disabled/>

启用该复选框后，将触发 onClick 事件。 当复选框被禁用时，onClick 事件将不会触发。

我的问题是：单击禁用的复选框时，如何执行 function ？

Answer 1

昨天我正在查看 StackOverflow，并在某个地方的问题中找到了这个解决方案，但现在我再也找不到它了。 当我找到它时，我会链接回它。

修复

为了捕获对禁用复选框的点击，您可以在禁用复选框上方覆盖一个div ，该div将接收所有 onClick 事件（此处演示）：

<style type="text/css">
  .checkboxWrapper {
    position: relative;
  }
  .checkboxOverlay {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }
</style>

<script type="text/javascript">
  function notify() {
    alert("Hello");
  }
</script>

<span class="checkboxWrapper">
  <input type="checkbox" disabled/>
  <div class="checkboxOverlay" onclick="notify();"></div>
</span>

这会将 div 放在复选框上。

IE浏览器

Internet Explorer中存在一个错误，其中div被强制置于checkbox下方，因此 div 无法接收点击事件，因为复选框阻止了它。 我读过这是因为 Internet Explorer 将复选框视为 ActiveX 控件，并且 ActiveX 控件被放置在所有其他元素之上。

为了绕过这个 Internet Explorer 错误，我们需要在 div 上放置一个背景。 我不知道为什么，但这会导致 div 弹出到顶部。 我们可以创建一个透明图像并将其用作 div 的背景。 我创建了一个 1x1 透明 gif 并将其设置为checkboxOverlay div 的背景：

  .checkboxOverlay {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: url(img/transparent.gif) repeat;
  }

现在它将在 Internet Explorer 中运行。

Answer 2

如果您不想将复选框包装在 div 中，请考虑不禁用复选框并修改复选框上的内置点击事件：

document.getElementById("checkboxId").addEventListener("click", function (event) {
   event.preventDefault();
   //The code you want to be run when the checkbox is clicked
});

Answer 3

在 Angular 4+

.html ->


          <label class="round-check" (click)="validate()">
             <input  type="checkbox" [(ngModel)]="item.isChecked" [disabled]="true">
            <span> {{item.text}}</span>
          </label>


.ts ->



 validate(){
        
          this._toastr.warning('your warning msg')
     
      }

Answer 4

尝试将每个输入包装在一个 div 中，并将 onclick 附加到该 div。 附带说明一下，您可能希望工具提示显示在 hover 而不是单击时。 如果您不使用库，请查看YUI 的事件实用程序。

Answer 5

$('.mycontainer').delegate(':checkbox:disabled', 'click', function(e) {
    //do stuff
});

Answer 6

使用 jQuery 很简单： $('#thisOneDoesnt').trigger('click'); 现场演示在这里。 使用干净的 javascript 不起作用： document.getElementById('thisOneDoesnt').click(); - 我不知道为什么，但我正在努力。

编辑

在 JavaScript 您可以启用、单击和禁用复选框。 现场演示在这里。

document.getElementById('thisOneDoesnt').disabled = false;
document.getElementById('thisOneDoesnt').click();
document.getElementById('thisOneDoesnt').disabled = true;