Question

I’ve been strugling with a bug that impact jQtransform :

When you click on a label associated to a checkbox, it “visually” checks the box but when submitting the form, it’s not sent. (so it only checks the jqTransform layer and not the real checkbox)

• Given the same scenario with a radio -> it works

• Clicking direclty on the checkbox -> it works

  $.fn.jqTransCheckBox = function(){
  return this.each(function(){
      if($(this).hasClass('jqTransformHidden')) {return;}
  
      var $input = $(this);
      var inputSelf = this;
  
      //set the click on the label
      oLabel = jqTransformGetLabel($input);
      oLabel && oLabel.click(function(){aLink.trigger('click');}); // -> Bug here ?
  
      var aLink = $('<a href="#" class="jqTransformCheckbox"></a>');
      //wrap and add the link
      $input.addClass('jqTransformHidden').wrap('<span class="jqTransformCheckboxWrapper"></span>').parent().prepend(aLink);
      //on change, change the class of the link
                  $input.change(function(){
                    inputSelf.checked && aLink.addClass('jqTransformChecked') || aLink.removeClass('jqTransformChecked');
                    return true;
                  });
      // Click Handler, trigger the click and change event on the input
      aLink.click(function(){
          //do nothing if the original input is disabled
          if($input.attr('disabled')){return false;}
          //trigger the envents on the input object
                          $(this).toggleClass('jqTransformChecked');
          $input.trigger('click').trigger("change");
          return false;
      });
  
      // set the default state
      this.checked && aLink.addClass('jqTransformChecked');
  });
  

  };

Thanks

Answer 1

It seems aLink.trigger('click') call isn’t working for some reason.
I fixed this by replacing this line:

oLabel && oLabel.click(function(){aLink.trigger('click');});

with the following:

oLabel && oLabel.click(function(){
    var forAttr = null;
    if(forAttr = $(this).attr('for')) {
        var element = $(this).siblings('#' + forAttr);
        if(element.length) {
            element.trigger('click');
        }
    }
    else {
        aLink.trigger('click');
    }
});

What this does is check in the label’s siblings for the element in its “for” attribute and if the element exists it uses that, instead of aLink.
I’m using siblings because it’s faster than searching the entire document. Feel free to change that if needed.

Hope this helps.

EDIT:
Okay, i may have rushed into it with this answer. My solution is wrong on many levels.

What i believe is actually happening is that clicking the label causes a double click. So, when clicking the label, the default click is triggered which checks the element and another click is triggered immediately after that which unchecks the checkbox.

My previous solution wasn’t actually doing anything, just preventing a second call since none of the conditions actually came through (the ‘#’ + forAttr element isn’t a sibling).

I found that just commenting out the line with the error fixes this issue.