即使刷新后也能保持按钮禁用的 JavaScript

2023-12-24

我有一个按钮,当您单击它时会被禁用,但是当我刷新页面时它仍然应该被禁用。我怎样才能做到这一点?

<button onclick="this.disabled = true">Disable</button>

你应该使用cookies https://developer.mozilla.org/en-US/docs/Web/API/document.cookie。页面刷新后,Javascript 不会保留页面状态(当然,除非您在服务器端进行):

DEMO http://jsbin.com/pecepate/1/

Code:

function setCookie(name, value){
  // Set cookie to `namevalue;`
  // Won't overwrite existing values with different names
  document.cookie = name + value + ';';
}

function checkIfClicked(){
  // Split by `;`
  var cookie = document.cookie.split(";");

  // iterate over cookie array
  for(var i  = 0; i < cookie.length; i++){
    var c = cookie[i];
    // if it contains string "click"
    if(/click/.test(c))
       return true;
  }
  // cookie does not exist
  return false;
}

// Set clicked to either the existing cookie or false
var clicked = checkIfClicked();

// Check if it was clicked before
alert(clicked);

// Get the button
var button = document.getElementsByTagName("button")[0];

// If it had been clicked, diable button
if (clicked) button.disabled = true;

// Add event listener 
// When button clicked, set `click` cookie to true 
// and disable button
button.addEventListener("click", function(){
  setCookie("click", "true");
  button.disabled = true;
}, false);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

即使刷新后也能保持按钮禁用的 JavaScript 的相关文章

随机推荐

  • 在 Hibernate 中设置属性的默认值不起作用

    我的实体中有一个布尔属性 这是我对它的注释 Column name IS ACTIVE nullable false columnDefinition BIT DEFAULT 1 length 1 public Boolean getAct
  • 提取与正则表达式匹配的子字符串

    我正在尝试提取22 chocolates来自以下字符串 SOMETEXT for 2 FFXX Another 22 chocolates 45 chamkila 使用正则表达式 d s chocolates chocolate 我用了 g
  • URL 重写如何以简单的英语进行工作

    我已经阅读了很多有关 URL 重写的内容 但我仍然不明白 据我了解 像这样的网址 http www example com Blog Posts php Year 2006 Month 12 Day 19 可以替换为更友好的 例如 http
  • 将 war 文件部署到托管 weblogic 服务器中给定的路径位置

    我用的是蚂蚁wldeploy部署 war 文件的任务 它工作正常 但部署服务器中的 war 文件路径设置为类似 servers myadminservername upload mywarfilename app 相反 我想在 Ant 构建
  • 重置表单/从 jQuery 验证中删除错误类

    我有一个带有 jQ uery 验证方法的联系表单 当用户单击 重置 按钮时 孔接触形式应进入初始状态 这个按钮看起来像
  • 如何在Python3中同时进行并行输入和输出?

    我需要设计一个脚本 该脚本使用终端的顶部部分作为输出 其中在无限循环中每秒打印一些行 底部部分不断接受用户输入并在上面的部分中打印它们 在常规周期中 输出 换句话说 我需要设计一种外壳 我尝试使用这样简单的方法进行多线程 usr bin p
  • 使用Python分页抓取谷歌搜索

    你好 我有一个代码可以抓取谷歌搜索结果并返回页面的链接 标题和描述 但是问题是它只抓取了第一页 我想添加分页和scrape多个页面 有人可以帮我弄清楚如何添加分页吗 我尝试了其他几个支持分页的示例 但它们的问题是它们仅返回 url 如果有人
  • 在 C# 中访问单个像素

    我现在正在做一个学校项目 它是一个 3D 编辑软件 就像 Maya 的最小化版本 我必须使用 Windows 应用程序项目 用 C 编写它 我打算自己实现所有 3D 内容 从投影到着色 我的问题是 如何直接访问 C Windows 应用程序
  • Git 无法识别 xcode 项目中添加的 .xcscheme 文件

    在我的 xcode 项目中添加了与测试目标相对应的新方案 创建的新 xcscheme 文件没有反映在 git 中 还做了一个git 状态给我看无需提交任何内容 工作目录干净 尝试通过终端添加它git add xcscheme says 您的
  • 在 iOS 中使用 Facebook SDK 登录时无法获取用户的电子邮件 ID

    当我使用下面的代码获取用户的电子邮件 ID 时 我得到 null 值 另外 我已经设置了像这样访问电子邮件的权限 self fbLoginButton readPermissions public profile email user fr
  • Rails Postgres 功能索引

    我应该如何将包含函数的多列索引输入到 schema rb 中 例如这不起作用 add index temporary events templateinfoid campaign date gw out time messagetype n
  • EF Code First:重复的外键(一个来自名称约定,一个来自导航属性)

    我正在尝试使用 EF Code First 创建 SQL 数据库 假设我有以下代码 public class Account public int Id public ICollection
  • 这种字典的使用是否线程安全?

    这是我的方法的两个变体 它返回一个与枚举值关联的字符串 保存在字典中 第一个变体较慢 但线程安全 第二个变体更快 但我不知道它是否是线程安全的 第一的 string GetStringForEnum SomeEnum e string st
  • 将 Spring Batch MyISAM 序列表迁移到 InnoDB

    Spring Batch 使用一些序列表 在 MySQL 中使用 MyISAM 存储引擎 我面临的问题是 我使用的是 Amazon Web Services RDS 数据库 并且它们的 时间点 数据库恢复功能不能很好地与包含 MyISAM
  • 如何在电子邮件中嵌入 PDF?

    我已经提到过这个帖子 https stackoverflow com questions 104177 how do i embed an image in a net html mail message 我一直在使用 PNG 文件的 Al
  • EC2 负载均衡器 - 安装 CA Bundle SSL/中间证书

    我正在使用 EC2 负载均衡器来处理 HTTPS 请求 对于 Chrome 和 Safari 让负载均衡器协议在端口 443 处使用 SSL 证书设置 HTTPs 可以正确处理大多数流量 来自 Safari 和 Chrome 的 HTTPS
  • C++函数调用是表达式吗?

    函数产生一个结果 可以用作另一个函数参数的参数 那么 函数调用是这样的 f 1 2 3 可以被视为 表达 吗 谢谢 C 标准 N3376 5 1 将表达式指定为 表达式是指定计算的运算符和操作数的序列 表达式可以产生一个值 并且可以引起副作
  • 单元测试描述问题

    Visual Studio 中有一个关于单元测试的描述条目 创建测试描述后是否可以修改 TestMethod Microsoft VisualStudio TestTools UnitTesting Description Test Cas
  • 从另一个小部件更改 Kivy 小部件属性

    我有一个带有按钮 id display name 的屏幕小部件 该按钮具有文本属性 当我按下该按钮时 会显示一个模式 其中有一个文本输入小部件和一个按钮小部件 我想在模式的文本输入小部件中输入文本 并在按下模式的按钮时在屏幕小部件的按钮中显
  • 即使刷新后也能保持按钮禁用的 JavaScript

    我有一个按钮 当您单击它时会被禁用 但是当我刷新页面时它仍然应该被禁用 我怎样才能做到这一点