javascript 如何在禁用复选框上检测 .click()
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12448425/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to detect .click() on disabled checkbox
提问by Lilleman
js/jQuery:
js/jquery：
$('input[type=checkbox]').click(function(){
// Does not fire if I click a <input type="checkbox" disabled="disabled" />
});
How do I make something happend in jQuery when someone clicks a disabled checkbox?
当有人单击禁用的复选框时，如何在 jQuery 中发生某些事情？
回答by Nope
Reading over the comment again regarding using readonlyfrom Jo?oSilva. You could use that and connect it with some logic in the click event.
再次阅读有关使用readonlyfrom的评论Jo?oSilva。您可以使用它并将其与单击事件中的某些逻辑连接起来。
Using readonlygives you the disabled look, just like disableddoes but it still lets you click it.
使用readonly为您提供禁用的外观，就像 do 一样disabled，但它仍然可以让您单击它。
Use readonly like this:
像这样使用只读：
<input type="checkbox" readonly="readonly">?
Then in your script cancel the event if readonly is set.
然后在您的脚本中，如果设置了只读，则取消该事件。
$('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.
});
?
DEMO
演示
回答by iambriansreed
You will not be able to capture the click event reliably across all browsers. Your best bet is to place a transparent element above to capture the click.
您将无法在所有浏览器中可靠地捕获单击事件。最好的办法是在上面放置一个透明元素来捕捉点击。
HTML
HTML
<div style="display:inline-block; position:relative;">
<input type="checkbox" disabled="disabled" />
<div style="position:absolute; left:0; right:0; top:0; bottom:0;"></div>
</div>?
JavaScript
JavaScript
$(':checkbox:disabled').next().click(function(){
var checkbox = $(this.prevNode);
// Does fire now :)
});
Note: This is an idea from this questionwhich I improved on.
注意：这是我改进的this question的一个想法。
回答by Ohgodwhy
You can't...but you can fake it by placing a div over the input with a transparent background, and define the click function on that div.
你不能......但是你可以通过在具有透明背景的输入上放置一个 div 来伪造它，并在该 div 上定义点击功能。
$('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.');
});
回答by VisioN
I see no other option as to add <div>block layer over the checkbox. So the solution should be the following:
我看不到其他选项可以<div>在复选框上添加块层。所以解决方案应该如下：
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");
});?
