Question

I am having issues clicking the area in the span where the disabled checkbox is. I read that the best way to get around not being able to click a disabled checkbox is to wrap it in a span.

Not sure what I am doing wrong. (probably something simple).
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

Disabled input elements don’t register click events. You can place another element on top of it and grab the click on that however (see the div in the third list item). See this 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>