Jquery UI 按钮在刷新时被禁用答案

【问题标题】：Jquery UI button gets disabled on refreshJquery UI 按钮在刷新时被禁用
【发布时间】：2010-04-27 05:57:49
【问题描述】：

几周前我在jquery论坛上问过这个问题，但没有运气，所以我会在这里再试一次:)

我为我正在进行的项目制作了一个简单的小部件，但遇到了一个奇怪的问题。

用一个示例实现来解释它是最容易的。 http://decko.dk/buttontest

页面上有3个按钮。第一个是我的下拉小部件。下一个是常规禁用按钮 (A)，最后一个是常规启用按钮 (B)。如果您然后刷新页面（按 F5 或其他），则启用的按钮现在神秘地被禁用。我不知道为什么会发生这种情况，但是如果按钮 A 没有被禁用，那么按钮 B 在刷新时不会被禁用。此外，如果我在我的小部件代码中删除对 insertAfter 的调用，则不会禁用该按钮。谁能解释为什么会发生这种奇怪的行为？

顺便说一句，我只能在 Firefox 中重现这个。

【问题讨论】：

感谢您提出这个问题，伙计 - 我遇到了同样的问题
我发现这个问题正在寻找相关问题的解决方案，其中 Chrome 和 FF 不会将禁用的 jQuery UI 按钮显示为禁用（它看起来就像一个启用的按钮，只是你不能点击它和工具提示不起作用），它似乎只能在 Opera 上按预期工作。经过一番摆弄，似乎“问题”是我使用的是“常规”jQuery的.attr('disabled', 'disabled')和.removeAttr('disabled')而不是jQuery UI的.button('option', 'disabled', aBoolean)。一旦我切换到后者，它就可以跨浏览器工作。希望对某人有所帮助。

标签： jquery-ui jquery-ui-button

【解决方案1】：

我认为这是 Firefox 如何记住表单字段/控件值和状态的错误：

第一个页面加载后，文档中有三个<button>元素，<button id="button_a">被禁用。（当启用或禁用 jQuery UI 样式按钮时，它会将底层元素设置为相同的状态。）
Firefox 记得第二个 <button> 已禁用。
页面刷新后，在运行任何脚本之前，Firefox 会恢复表单域和控件。它禁用了第二个<button>，但由于没有运行任何脚本，所以第二个按钮是<button id="button_b">。
当 jQuery UI 为 <button id="button_b"> 创建样式按钮时，它发现它已被禁用并继续将其样式设置为已禁用。

这里有两个问题：

Firefox 如何记住哪些元素被禁用。它没有考虑动态元素。我为此建议filing a bug with Mozilla。
页面刷新后表单元素保持禁用状态。我不确定这是否是正确的行为，但这里有两个 bugzilla reports。

测试用例可以简化为只动态添加<button>元素并禁用<button id="button_a">，不需要jQuery / jQuery UI：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>disabled button test</title>
    <script type="text/javascript">
    window.onload = function () {
        var a = document.getElementById('button_a'),
            menu = document.createElement('button');
        menu.appendChild(document.createTextNode('Menu'));
        document.body.insertBefore(menu, a);
        a.disabled = true;
    };
    </script>
</head>
<body>
    <button id="button_a">A</button>
    <button id="button_b">B</button>
</body>
</html>

【讨论】：

这也是我的想法，但希望这是一个 jquery 错误（因为这会更容易修复）。但是对于您显示的代码，这绝对是 Firefox 中的“缓存”错误。

【解决方案2】：

我也遇到了这个问题，发现这是由于 Firefox 中的愚蠢行为，我的解决方法是这样的：

之前：

//set up the buttons
$("button").button();

之后：

//set up the buttons (and make sure firefox behaves)
$("button").button().attr("autocomplete", "off");

【讨论】：

不确定“自动完成”应该为按钮做什么 - 对我不起作用。我改用$('button').removeAttr('disabled').button();。
从那以后有几个版本的 firefox，所以这种行为可能已经改变，但自动完成关闭似乎阻止了 firefox 在刷新页面时保存控件状态的恼人习惯
您可以在 html 标记中设置autocomplete="off" 属性。
@UberNeet：是的，但是对于我们这些还没有使用 HTML 5 并且意识到标准的人来说，该属性是无效的，而通过 JS/jQuery 来实现则不是。可能是语义上的东西，但是你去:-)

【解决方案3】：

将Expires HTTP 标头设置为过去的日期，为我在 Firefox 6.0 中解决了这个问题。

【讨论】：

【解决方案4】：

这是我发现在所有浏览器中都非常有效的解决方案...

我给每个按钮（可以禁用）一个类 'js_submit'

然后，我在页面卸载时触发的 pagehide 事件中重新启用任何具有类“js_submit”的禁用按钮。

我将事件分配包装在 try catch 中，以防止不支持此事件的浏览器抛出错误（例如 IE）。

代码如下：

<input id="button" type="button" value="Submit" class="js_submit" />


// Fix for firefox bfcache:
try {
    window.addEventListener('pagehide', PageHideHandler, false);
} catch (e) { }

//Fires when a page is unloaded:
function PageHideHandler() {
    //re-enable disabled submit buttons:
    $('.js_submit').attr('disabled', false);
}

【讨论】：

【解决方案5】：

在我的情况下，这是一个引导程序错误

<input id="appointmentBtn" type="button" 
ng-click="addAppointment()" class="btn btn-primary btn-xs 
disabled" value="Add Appointment">

应该是这样的

<input id="appointmentBtn" type="button" 
ng-click="addAppointment()" class="btn-primary btn-xs 
disabled" value="Add Appointment">

【讨论】：

请将此添加为评论。