span делегат клик - не могу кликнуть над отключенным флажком

Question

У меня возникают проблемы при щелчке области в промежутке, где установлен флажок отключен.Я читал, что лучший способ обойти невозможность установить флажок с отключенным флажком - это обернуть его в промежуток.

Не уверен, что я делаю неправильно.(возможно что-то простое). Сломанная 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 .

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.Наборы для всех флажков

2. проверяет, если флажок отключен и ничего не делает, в противном случае делает то, что вы хотите

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