jQuery Uniform Checkbox 不（取消）选中

Posted 2023-03-05

【中文标题】jQuery Uniform Checkbox 不（取消）选中

【英文标题】：jQuery Uniform Checkbox does not (un)check

【发布时间】：2011-10-02 00:53:15

【问题描述】：

我正在使用jQuery Uniform 来设置输入/选择等样式。但是，该复选框已停止工作。我是从 ajax 调用发送的 appending 数据。加载后，我使用$.uniform.update("input:checkbox") 更新新的html。当尝试（取消）检查输入时，它只工作一次。如果我想再次（取消）检查它，它根本不会改变。

我尝试更改Uniform javascript，以便所有操作（即click、focus、blur 等）都在.live 函数下。 （即.live("click",）。这只会阻止任何工作。

更新：

我通读了 Uniform JS 并发现了一个问题：

if(!$(elem).attr("checked"))
    //box was just unchecked, uncheck span
    spanTag.removeClass(options.checkedClass);
else
    //box was just checked, check span.
    spanTag.addClass(options.checkedClass);

.attr("checked") 语法失败。它总是返回 false。为什么？我不知道。除此之外，它不会更新原始input 以删除checked 属性或设置checked 属性。

我浏览了官方网站，发现它没有更新复选框输入。所以不只是我xP

我在谷歌上搜索了一下，发现了各种检查复选框是否被选中的方法，但是以下方法失败了：

if ($(elem).attr("checked")) // The original.
if ($(elem).attr("checked") == true)
if ($(elem).is(":checked"))
if ($(elem).checked)
// and:
var check = $(elem).match(/checked=/);
if (check == null)

非常感谢您的指导~ :3

【参考方案1】：

简单的解决方案

这是因为UniformJs 要求您在需要动态更改表单上的值时更新对统一元素的修改：

$('#checkbox').prop('checked',true);
$.uniform.update();

编辑

如果您只想更新#checkbox：

$('#checkbox').prop('checked',true);
$.uniform.update('#checkbox');

【参考方案2】：

这样做：

$('#checkbox').prop('checked',true).uniform('refresh');

【参考方案3】：

我知道这可能有点晚了，但希望它会对某人有所帮助。我必须在统一代码中添加几行，以便它会查找预先选中的复选框。这段代码对我来说从第 262 行开始。我正在使用统一版本 1.7.5。 “由 John 添加”注释之间的线条是我添加的。

        "click.uniform touchend.uniform": function()
      if(!$(elem).attr("checked"))
        //box was just unchecked, uncheck span
        spanTag.removeClass(options.checkedClass);
      // Added by John to look for checkboxes with the attr "checked" that have been click to uncheck
      else if(!$(elem).is(':checked'))
        spanTag.removeClass(options.checkedClass);
      // end addition by john
      else
        //box was just checked, check span.
        spanTag.addClass(options.checkedClass);
      
    ,

【讨论】：

这对 jQuery 1.6.4 不起作用，因为 if(!$(elem).attr("checked")) 仅在页面加载时检查复选框是否被选中。这是与以前版本的 jQuery 不同的行为。使用prop 而不是attr 来确定“已检查”的当前状态。

优秀的 John 在我的 jquery.uniform.min 文件上尝试了 Alex 将 .attr 更改为 .prop 的方法，但没有解决问题。实施了您的解决方案并添加了 Grants 更改，并且效果很好。多谢你们。顺便用jQuery1.6.4。

【参考方案4】：

已经有一段时间了，但我遇到了同样的问题，但我通过一个简单的解决方案解决了它。

Uniform 在复选框上添加一个span，如果它被选中，则为它提供checked 类，但仅在页面加载时。如果您在页面已加载时选中或取消选中该复选框，它将取消选中（或选中），但由于 span 已超过它，您将看到它未更新，您必须手动进行。

$('#myDiv input[type=checkbox]').attr('checked',true);
$('#myDiv input[type=checkbox]').parent().addClass('checked');

或

$('#myDiv input[type=checkbox]').attr('checked',false);
$('#myDiv input[type=checkbox]').parent().removeClass('checked');

可能不是最干净的解决方案，但适用于所有浏览器。

【讨论】：

这段代码对我来说很好用。仅第二行代码就可以解决问题。谢谢

Hey Jean-Francois，这是因为Uniform元素在修改后需要更新，我已经发布了解释@​​987654321@。

【参考方案5】：

jQuery 1.6.4 改变了 jquery.uniform.js 使用的attr() 函数的含义。 attr() 现在返回页面加载时属性所处的状态 - 而不是现在属性的状态。有一个名为prop() 的替换函数，它完成了attr() 过去所做的工作。

要修复插件，请将每次出现的attr("checked") 替换为prop("checked")。另外，将attr("disabled") 更改为prop("disabled")。

这应该可以修复您的项目。它对我有用；-)

另请参阅：https://github.com/pixelmatrix/uniform/pull/167，它试图通过更好的向后兼容性来解决该问题。

【参考方案6】：

我相信最新版本的 Jquery 使用不同的方法来评估 :checked 值。使用稍旧的版本（虽然不理想）为我解决了这个问题。不过那是不久前的事了，PixelMatrix 似乎还没有更新 Uniform。

【参考方案7】：

你不能使用类似的东西

$("#checkbox").attr("checked", "true");

使复选框被选中，并且

$("#checkbox").removeAttr("checked");

取消选中它？

【讨论】：

如果元素已被检查，一旦发现语法，这些方法就会起作用。无论如何谢谢：D

啊，那是误会问题了:)

【参考方案8】：

您无需将.attr() 更改为.prop()：

    "click.uniform touchend.uniform": function()
        if(!$(elem).attr('checked'))
            //box was just unchecked, uncheck span
            spanTag.removeClass(options.checkedClass);

            //Added by PingOn
            $(elem).removeAttr('checked');
            //end addition by PingOn

            // Added by John
        else if(!$(elem).is(':checked'))
            spanTag.removeClass(options.checkedClass);
            // end addition by john

            //Added by PingOn
            $(elem).removeAttr('checked');
            //end addition by PingOn
        else
            //box was just checked, check span.
            spanTag.addClass(options.checkedClass);

            //Added by PingOn
            $(elem).attr('checked','true');
            //end addition by PingOn