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

Question

我的表单中有一些复选框：通过选中一个，您可以禁用另一个。下面的代码运行得很好。问题是，当用户提交后（页面重新加载时）出现错误时，禁用的复选框将再次启用。但我希望它保留其禁用状态。

<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);
});

})     

除了这个特定问题之外，我还遇到了单选按钮的另一个类似问题（在页面后维护单选切换 div 的状态重新加载）并在页面重新加载时保持显示/隐藏/切换状态。是否有一些 jQuery 函数可以在页面重新加载后记住所有这些状态？您认为这个 http://www.jasonsebring.com/dumbFormState 可以帮助我实现我想要的目标吗达到？我是 jquery 的新手，我将不胜感激任何帮助、提示或良好实践的示例。

Answer 1

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

这可以使用 javascript/jquery 来完成，

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

尝试此以获取更多信息

http://www.beakkon.com/tutorial/html5/web-storage

@atmd83

Answer 2

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

因此，您有两个选择：

1. Cookies
2. HTML5 Web 存储

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

这是一个常用的 jQuery cookie 插件。

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

Answer 3

有两种方法可以做到这一点。您可以在服务器端脚本中通过检查 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 在此处记录了所有这些内容。本质上是设置一个 "disable_Q09_01=true" 的 cookie，然后根据应用程序读取或清除它。我相信这种方法不太理想，因为用户可能关闭了 cookie，但无论您使用什么服务器端脚本，这都会起作用。