记住页面重新加载后 .attr 的状态答案

【问题标题】：remember the state of .attr after page reload记住页面重新加载后 .attr 的状态
【发布时间】：2012-02-19 13:35:49
【问题描述】：

我的表单中有一些复选框：选中一个，就禁用另一个。下面的代码效果很好。问题是当用户在提交后（页面重新加载时）出现错误时，禁用的复选框再次启用。但我希望它保持其禁用状态。

<label for="Q09_01">
  <input class="Q09" name="Q09[]" id="Q09_01"  type="checkbox" />
aaa</label>
<label for="Q09_02">
  <input class="Q09" name="Q09[]" id="Q09_02"  type="checkbox" value="Q09_02" />
bbb</label>
<label for="Q09_03">
  <input class="Q09" name="Q09[]" id="Q09_03"  type="checkbox" value="Q09_03" />
ccc </label>
<label for="Q09_04">
  <input class="Q09" name="Q09[]" id="Q09_04"  type="checkbox" value="Q09_04" />
ddd </label>

jQuery:

$(function(){

$('#Q09_01').click(function() {
$('#Q09_03').attr('disabled', this.checked);
});
$('#Q09_03').click(function() {
$('#Q09_01').attr('disabled', this.checked);
});

})

除了这个特定问题之外，我还遇到了另一个与单选按钮 (maintain the state of a radio-toggled div after page reload) 类似的问题，并在页面重新加载时保持显示/隐藏/切换状态。是否有一些 jQuery 函数可以在页面重新加载后记住所有这些状态？你认为这个http://www.jasonsebring.com/dumbFormState 可以帮助我实现目标吗？我是 jquery 的新手，如果有任何帮助、提示或良好做法示例，我将不胜感激。

【问题讨论】：

您的问题解决了吗？

标签： jquery state attr checked

【解决方案1】：

有两种方法可以做到这一点。您可以通过检查 POST 输入并匹配它来在服务器端脚本中处理此问题。本质上，检查变量是否已定义（或具有值），如果没有，则将该框标记为禁用。在您的情况下，实际上，您正在检查实际提交的值，所以这实际上只是遵循您的 jQuery 逻辑。例如一些原始的 PHP：

$disable_Q09_01 = $_POST['Q09'] == "Q09_03"

<input class="Q09" name="Q09[]" id="Q09_01"  type="checkbox" 
  <? if ($disable_Q09_01) echo "disabled"; ?>
 />

请原谅我，自 PHP 以来已经有一段时间了，我只是认为它比提供 Rails 代码更常见。

另一种方法是在提交表单之前创建一个 cookie。 W3 记录了所有这些here。本质上是设置"disable_Q09_01=true"的cookie，然后根据应用读取或清除。我认为这种方法不太理想，因为用户可能关闭了 cookie，但是无论您使用什么服务器端脚本，这都会起作用（ish）。

【讨论】：

感谢您的回复。我不太了解 php，所以如果有其他选择，我希望这次避免将 php 脚本放到我的页面中。我确信在 jQuery 中一定有办法做到这一点，但我不知道怎么做。
你使用什么服务器端语言？

【解决方案2】：

您是否尝试过使用本地或会话存储来存储输入的状态？如果会话或本地存储存在，您可以在页面加载时加载输入状态。

这可以用 javascript/jquery 来完成

它不会涉及任何服务器代码或 cookie

@atmd83

【讨论】：

浏览器支持怎么样？我找不到这方面的任何信息。
在 jQuery 中，也许只是一些简单的条件就可以解决我的问题？类似 ' 如果选中#Q09_01，禁用#Q09_03' ?
您可以使用 ie 行为作为后备来支持 ie6 及以后的版本

【解决方案3】：

您不能使用 jQuery 来记住页面状态。刷新页面时，将重新发送 HTML，默认返回原始状态。如果您愿意使用服务器端语言，例如 PHP，则不必如此。但正如您在评论中所说，您不想使用 PHP。

因此，您有两种选择：

Cookie
HTML5 网络存储

并非所有浏览器都支持#2，所以我建议使用#1。本质上，当用户选中一个框时，会创建/更新一个 cookie。然后在页面重新加载时，在文档准备好 ($(document).ready(..)) 后，您将使用 JavaScript 读取 cookie 并对 DOM 进行必要的更改（即选中正确的框）。

Here's a commonly used jQuery cookie plugin.

如果您在创建/更新/读取 cookie 时遇到问题，您应该专门发布一个新问题。

【讨论】：