Question

I’ve got a checkbox:

 <td class="checkbox">
      <input type="checkbox" 
             value="100" 
             id="chkbox_100" 
             name="chkbox[]" 
             class="chkbox_selector" 
             disabled="">
 </td>

I’ve got some jQuery:

 $(':checkbox').each(function(){
      $(this).dblclick(function(e){
           $(this).removeAttr("disabled");
      });
 });

My intended behaviour is that when I double click on the box, the disabled attribute is removed BUT that’s not happening.

If I load the checkbox without the disabled & replace $(this).removeAttr("disabled"); with an alert('here'); I get the expected functionality.

If I run a naked $(this).removeAttr("disabled"); the checkboxes on the page load without the disabled attribute (and, funny enough are also able to give off the “HERE” alert).

So, what’s preventing jQuery from binding a double click event to a disabled checkbox? Is there a simple way to fix this?

Answer 1

Nothing is preventing jQuery from binding the event. It is the fact that it’s disabled that causes the event handler to not fire.

If you assign the handler, then remove the disabled attribute, the handler still works.

 $(':checkbox').dblclick(function(e){
     alert('here');
 });

 $(':checkbox').removeAttr("disabled");