Javascript 如何检测禁用复选框上的.click（）

js/jQuery：

$('input[type=checkbox]').click(function(){
  // Does not fire if I click a <input type="checkbox" disabled="disabled" />
});

$（'input[type=checkbox]'）。单击（function（）{
//如果单击某个按钮，则不会激发
});

---

当有人单击一个禁用的复选框时，我如何在jQuery中执行某些操作？

我看不到在复选框上添加

块层的其他选项。因此，解决方案应如下所示：

function addDisabledClickHandler(el, handler) {
    $("<div />").css({
        position: "absolute",
        top: el.position().top,
        left: el.position().left,
        width: el.width(),
        height: el.height()
    }).click(handler).appendTo("body");
}

var el = $("input[type='checkbox']");
addDisabledClickHandler(el, function() {
    alert("Clicked");
});​

函数addDisabledClickHandler（el，handler）{
$（“”）.css({
位置：“绝对”，
顶部：el.位置（）.顶部，
左：el.position（）.左，
宽度：el.width（），
高度：标高高度（）
})。单击（处理程序）。附加到（“正文”）；
}
var el=$（“输入[type='checkbox']”）；
addDisabledClickHandler（el，函数（）{
警报（“点击”）；
});​

---

演示：

您将无法在所有浏览器中可靠地捕获单击事件。最好的办法是在上面放置一个透明元素来捕获单击

HTML

---

注意：这是我改进的一个想法。

你不能…但是你可以通过在输入上放置一个透明背景的div来伪造它，并在该div上定义click函数

$('input').each(function(){
    if(true == ($(this).prop('disabled'))){
        var iTop = $(this).position().top;
        var iLeft = $(this).position().left;
        var iWidth = $(this).width();
        var iHeight = $(this).height();
    $('body').append('<div class="disabledClick" style="position:absolute;top:'+iTop+'px;left:'+iLeft+'px;width:'+iWidth+'px;height:'+iHeight+'px;background:transparent;"></div>');    
    }       
});

//delegate a click function for the 'disabledClick'.


$('body').on('click', '.disabledClick', function(){
   console.log('This is the click event for the disabled checkbox.');
});

$（'input'）。每个（函数（）{
if（true==（$（this）.prop（'disabled'））{
var iTop=$（this）.position（）.top；
var iLeft=$（this）.position（）.left；
var iWidth=$（this）.width（）；
var iHeight=$（this）.height（）；
$（'body'）。追加（''）；
}       
});
//为“disabledClick”委派单击功能。
$（'body'）。在（'click'，'disabledClick'，function（）上{
log（'这是禁用复选框的单击事件'）；
});

---

再次阅读关于使用

JoãoSilva

中的

readonly

的评论。您可以使用它，并在单击事件中将其与一些逻辑连接起来

使用

readonly

可以显示禁用的外观，就像

disabled

一样，但仍然可以单击它

像这样使用readonly：

<input type="checkbox" readonly="readonly">​

---

无法单击已禁用的复选框。如果该复选框已禁用，则不会触发单击事件。您是否可以使用

只读

而不是

禁用

？可能的重复：该帖子中的答案使用了一个围绕输入控件的元素以及一个辅助控件，该控件截获了可用于触发实际点击事件的点击事件。您仍然可以执行

$（'input[type=checkbox]'）。单击（）

以编程方式触发单击事件，即使输入被禁用。@JoãoSilva:Using

readonly=“true”

灰显控件，但仍允许用户选中/取消选中它。无论如何，在Chrome中。这并不完全是我想要的，但这解决了我的问题，所以我会在一分钟内接受它，当我可以的时候。：）@Lilleman如果你想要一个跨浏览器的解决方案，这是你能做的最好的。很高兴我能提供帮助。@ianpgall操作的标题是“如何触发。单击（）禁用复选框”@ianpgall此对话对社区或操作没有帮助。请停止跟踪。谢谢。这应该是选择的答案。它提供了所需的功能，并且最不易被攻击。

readonly

应该指定为无值或值

readonly

，即

readonly=“readonly”

，而不是

true

@Barmar:i现在修复了这个问题，并添加了一个演示。谢谢。readonly不是酒店吗？如果是这样，它可以简化为：If（$（this）.prop（'readonly'）返回false@Lilleman：我使用了

attr

，因为我不知道您使用的是哪个版本的jQuery

prop

是在1.6中添加的，因此，是的，如果您使用的是至少1.6，则相关行可以更改为

var isReadOnly=$（本条）。道具（“只读”）和代码仍然有效。
$('input').each(function(){
    if(true == ($(this).prop('disabled'))){
        var iTop = $(this).position().top;
        var iLeft = $(this).position().left;
        var iWidth = $(this).width();
        var iHeight = $(this).height();
    $('body').append('<div class="disabledClick" style="position:absolute;top:'+iTop+'px;left:'+iLeft+'px;width:'+iWidth+'px;height:'+iHeight+'px;background:transparent;"></div>');    
    }       
});

//delegate a click function for the 'disabledClick'.


$('body').on('click', '.disabledClick', function(){
   console.log('This is the click event for the disabled checkbox.');
});

<input type="checkbox" readonly="readonly">​

$('input[type=checkbox]').click(function() {
    var isReadOnly = $(this).attr("readonly") === undefined ? false : true;

    if (isReadOnly) {
        return false;
    }

    // other code never executed if readonly is true.
});
​