Jquery span代理单击-不能单击上面的禁用复选框

单击范围中禁用复选框所在的区域时出现问题。我读到，最好的办法是绕过不能点击一个禁用的复选框是把它包装成一个跨度

不知道我做错了什么。（可能很简单）。

测试检查1：

测试B检查2：

测试D检查3：


$（'li'）。委托（'span'，'click'，函数（事件）{
警报（“点击”）；
#这是一个真实的例子
event.preventDefault（）；
}
);​

如果您试图在单击复选框时启动函数：

1.所有复选框的设置

2.检查复选框是否已禁用且不执行任何操作，否则将执行您想要的操作

$(":checkbox").bind('each click', function(e){
if($(this).is('disabled')){
    e.preventDefault();
}else{
  ///Do something here         
}
});

---

禁用的输入元素不注册单击事件。您可以在它上面放置另一个元素，然后点击它（参见第三个列表项中的div）。请参见此

jQuery：

$('li').on('click', 'div', function(event){ 
    alert('clicked');
);​

HTML:

测试检查1：

测试B检查2：


测试D检查3：

我不清楚您想要实现什么目标。您希望何时触发警报？您好，我尝试单击复选框上方的右上方，但它确实触发了一个事件，或者是其他原因，我在OSX lion/chrome上，干杯-您单击了禁用复选框上方的？我单击了d复选框，但没有看到“单击”警报…？因为它位于复选框后面或下面。我将跨度放在那里尝试执行相同操作，因此我将删除它并使用div。另外，通过绝对定位div，您可以将其从文档的正常流中删除，并可以将其放在另一个元素的顶部，这是输入。这在我们的测试程序中很好，但是我如何定位它，使它保持在li中？现在它占据了我一半的页面；）如果导致问题，您可以向div添加width属性。

$('li').on('click', 'div', function(event){ 
    alert('clicked');
);​

<ul class="field">
    <li><span>Test A <label for="id_check1">Check 1</label>:
    <input checked="checked" type="checkbox" value="1" id="id_check1" /></span>
    </li>
    <li><span>Test B <label for="id_check2">Check 2</label>:
    <input checked="checked" type="checkbox" value="2" id="id_check2" /></span>
    </li>
    <li style='position: relative'>
    <div style="position: absolute; left: 0; right: 0; top: 0; bottom: 0;">
    </div>
    <span>Test D <label for="id_check3">Check 3</label>:
    <input checked="checked" type="checkbox" value="3" id="id_check3" disabled="disabled" /></span>
    </li>
</ul>