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事件将不会触发。

我的问题是：如果单击禁用的复选框，我该如何执行功能？

Answer 1

昨天我正在浏览StackOverflow并在某个地方找到了这个解决方案，但我现在再也找不到了。当我找到它时，我会链接回来。

修复

为了捕获已停用的复选框，您可以将div覆盖在已禁用的复选框上方，div将收到所有onClick事件（演示here）：< / p>

<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放在复选框上。

Internet Explorer

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中并将onclick附加到div。另外，您可能希望工具提示在悬停时显示，而不是在点击时显示。如果您没有使用图书馆，请查看YUI's event utility。

Answer 3

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

Answer 4

如果您不想将复选框包装在div中，请考虑不对复选框进行更改，并修改复选框上的内置click事件：

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

Answer 5

在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 6

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

修改

在JavaScript中您可以启用，单击和禁用复选框。现场演示here。

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

单击禁用复选框时如何执行功能？

6 个答案:

修复

Internet Explorer