jsFiddle

I'm using a jQuery plugin that allows the user to draw boxes in an area. I use jQuery to put a checkbox (along with a dropdown list) in the box that appears when the user lets go of the mouse button (this is towards the bottom of the javascript in the jsFiddle). The problem is, the checkbox is unclickable.

I do have some click checking code in the _mouseStart, _mouseDrag and _mouseStop events to stop another box from being created when you click in an existing box, but I don't think this is causing the problem because the dropdown list that is created can be clicked, and furthermore if you remove the click checking code the checkbox remains unclickable.

What is causing the checkbox to be unclickable? Thanks for reading.

EDIT: Thanks to VinayC's answer, I can now see that the click reaches the checkbox, with this code:

$('#box').click(function(e){
    alert('clicked');
    $(this).attr('checked', true);
});

But the $(this).attr('checked', true); line doesn't make the checkbox checked. Can anyone tell me why? I've updated the jsFiddle

EDIT 2: Harmen noticed that the code assigns the same id to each checkbox. In the actual code there's a counter appended to the id, so each one is unique, but I've taken that out because I think this is just a jQuery issue. I'd change the jsFiddle, but if you just create one box (thus one checkbox), the same problem occurs.

jsFiddle

I'm using a jQuery plugin that allows the user to draw boxes in an area. I use jQuery to put a checkbox (along with a dropdown list) in the box that appears when the user lets go of the mouse button (this is towards the bottom of the javascript in the jsFiddle). The problem is, the checkbox is unclickable.

I do have some click checking code in the _mouseStart, _mouseDrag and _mouseStop events to stop another box from being created when you click in an existing box, but I don't think this is causing the problem because the dropdown list that is created can be clicked, and furthermore if you remove the click checking code the checkbox remains unclickable.

What is causing the checkbox to be unclickable? Thanks for reading.

EDIT: Thanks to VinayC's answer, I can now see that the click reaches the checkbox, with this code:

$('#box').click(function(e){
    alert('clicked');
    $(this).attr('checked', true);
});

But the $(this).attr('checked', true); line doesn't make the checkbox checked. Can anyone tell me why? I've updated the jsFiddle

EDIT 2: Harmen noticed that the code assigns the same id to each checkbox. In the actual code there's a counter appended to the id, so each one is unique, but I've taken that out because I think this is just a jQuery issue. I'd change the jsFiddle, but if you just create one box (thus one checkbox), the same problem occurs.

• javascript
• jquery
• jquery-ui
• checkbox

• That plugin seems to be causing all sorts of trouble for you! – alex Commented Sep 28, 2010 at 6:22
• @alex: Sure is! Wish I knew enough jQuery to make my own. – ben Commented Sep 28, 2010 at 6:24

5 Answers 5

I've got no idea why, but while fiddling around (yes, on fiddlejs), this seems to do the trick

  $('#box', ui.box).click(
      function(evt){
          evt.stopPropagation();
      }
   );

when setting up the box. See: http://jsfiddle/BBh3r/9/

I was actually trying to intercept the event and manually set it checked, but if there's no need to set it then hey.. Perhaps there's an extra event generated somewhere negating the first..? Click's only triggered once though.

Might be related to building jquery checkbox - can't set checked value

PS. Only tested on Chrome for Linux

You're creating multiple checkboxes with the same id.

It appears that top level event handlers are cancelling the click event. Add onclick event handler on check-box element alerting and you will see that click reaches to the checkbox.

Actually it is checked while the alert is visible, but it bees unchecked afterwards. I'm guessing that after your event handler sets it to checked, the default event for the click (which is to toggle the check mark) happens, and since it is checked at the moment, it bees unchecked again. Try calling preventDefault from the click handler.

You can also try this for a more universal approach

This worked for me.

$(document).click(function (e) {
   if (element.tagName == 'INPUT') {
      if ($(element).attr("type") == 'checkbox') {
         e.stopPropagation();                                
         e.preventBubble();                             
         return;
      }
   }
});