2

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

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

  • 给定与收音机相同的场景->它可以工作

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

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

    };

谢谢

4

5 回答 5

3

似乎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 元素不是兄弟元素）。

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

于 2012-11-06T13:50:06.853 回答
1

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

在我看来，问题出在 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 里面似乎为我解决了这个问题。

于 2012-04-20T14:01:25.043 回答
1

我发现的是这个

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

有效，但这

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

没有

两者都适用于无线电输入！

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

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

于 2012-01-30T16:23:26.183 回答
0

As Vlad Cazacu mentioned the problem is caused by double click (default one and the one called in click function).

To avoid default event we have to return false:

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

at least it worked for me :)

于 2014-09-02T10:52:17.140 回答
0

这不完全是我的情况，但我发现此页面试图找到相同问题的解决方案（未发送字段）；不同之处在于我使用不带标签的 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éric Hamidi 对“Toggle Checkboxes on/off”问题的回答。

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

于 2020-11-20T05:51:32.137 回答