Question

我在点击禁用复选框所在范围内的区域时遇到问题。我读到，无法单击禁用复选框的最佳方法是将其包装在一个范围内。

不确定我做错了什么。（可能很简单）。 Broken JS Fiddle

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


$('li').delegate('span', 'click', function(event) {
    alert('clicked');
    #this is here bc the real example has anchors
    event.preventDefault();
   }
);

Answer 1

已禁用的输入元素不会注册点击事件。您可以在其上放置另一个元素并抓住其上的单击（请参阅第三个列表项中的div）。请参阅 jsFiddle example 。

jQuery的：

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

HTML：

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

Answer 2

如果您在点击复选框时尝试触发某项功能：

1.Sets for all复选框

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

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

span delegate click - 无法单击以上禁用复选框

2 个答案: