Question

我一直在讨论影响jQtransform的错误：

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

考虑到收音机的相同情况 - ＆gt; 有效

点击复选框上的direclty - ＆gt; 有效

$.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。我正在使用兄弟姐妹，因为它比搜索整个文档更快。如果需要，请随意更改。

希望这有帮助。

编辑：好吧，我可能已经用这个答案赶到了它。我的解决方案在很多层面都是错误的。

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

我以前的解决方案实际上并没有做任何事情，只是阻止了第二次调用，因为没有任何条件实际发生（'＃'+ forAttr元素不是兄弟）。

我发现仅仅注释错误就行了解了这个问题。

Answer 2

我发现的是这个

<input type="checkbox" name="sexi" id="test" />
<label>Female</label>

有效，但是这个

<input type="checkbox" name="sexi" id="test" />
<label for="test">Female</label>

不

都适用于无线电输入！

第一种方法起作用的原因实际上是因为在复选框的情况下，当您单击标签时，单击会被触发两次

我正在尝试修复代码中的错误，但相同的代码用于收音机和复选框......嗯..

Answer 3

我不确定这是否是同一个问题，但是当单选按钮被转换时，点击它们的标签会让它们都被检查，尽管发布的值是正确的。

在我看来，问题出在jqTransformGetLabel上。

它尝试使用next（）获取标签，如果不起作用，则使用prev（）。在DOM中只有一个级别。改变

var oLabel = objfield.next();

到

var oLabel = $(objfield.find('label').get(0));

和

oLabel = objfield.prev();

到

oLabel = $(objfield.parents('label').get(0));

里面的jqTransformGetLabel似乎为我解决了这个问题。

Answer 4

正如Vlad Cazacu所说，问题是双击造成的（默认的一个和点击功能中的一个）。

为了避免默认事件，我们必须返回false：

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

至少它对我有用：）

Answer 5

这不完全是我的情况，但是我发现此页面试图找到解决同一问题的方法（未发送字段）；区别在于我使用的是不带标签的jQtransform，只是为了识别表中已检查的行。

我发布此解决方案只是为了帮助像我这样来到这里的人，寻找一些不错的技巧;）

我像kbalcerek一样更改了第140行（在原始文件中）：

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

然后，在input.change事件（第147行）中，我对此进行了更改...

this.checked && aLink.addClass('jqTransformChecked') || aLink.removeClass('jqTransformChecked');

...对此：

$(this).attr('checked') && aLink.addClass('jqTransformChecked') || !$(this).attr('checked') && aLink.removeClass('jqTransformChecked');

最后，在aLink.click事件（第155行）中，我不得不对此进行了修改...

$input.trigger('click').trigger("change");

...进入其中：

$input.attr('checked', !$input.attr('checked')).trigger("change");

在最后两个更改中，我的灵感来自于弗雷德里克·哈米迪（FrédéricHamidi）回答的“打开/关闭切换复选框”问题。

为我解决=）希望能帮助某人

单击标签不会检查相关的复选框

5 个答案: