jquery - 单击标签不会选中关联的复选框

Question

我一直在努力解决影响 jQtransform 的错误:

当您单击与复选框关联的标签时，它会“直观地”选中该框，但在提交表单时，不会发送。 (所以它只检查 jqTransform 层，而不检查真正的复选框)

• 给定与 radio 相同的场景 -> 它有效

• 直接单击复选框 -> 有效

  $.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');
  });
  

  }；

谢谢

Answer 1

由于某种原因，aLink.trigger('click') 调用似乎不起作用。我通过替换这一行解决了这个问题:

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

具有以下内容:

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');
    }
});

它的作用是在标签的“for”属性中检查该元素的同级元素，如果该元素存在，则使用该元素而不是 aLink。我使用 sibling 是因为它比搜索整个文档更快。如果需要，请随意更改。

希望这有帮助。

编辑:好吧，我可能是仓促地回答了这个问题。我的解决方案在很多层面上都是错误的。

我认为实际发生的是单击标签会导致双击。因此，当单击标签时，会触发默认单击以检查元素，并在取消选中复选框后立即触发另一次单击。

我之前的解决方案实际上并没有做任何事情，只是阻止第二次调用，因为没有任何条件真正通过(“#”+ forAttr 元素不是同级元素)。

我发现只需注释掉有错误的行就可以解决此问题。