html disabled属性禁止点击属性

最新推荐文章于 2025-09-16 09:45:02 发布

原创最新推荐文章于 2025-09-16 09:45:02 发布 · 2.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#disabled

html+css 专栏收录该内容

4 篇文章

订阅专栏

博客围绕HTML的disabled属性展开，该属性可实现禁止点击功能，在前端页面交互中有重要作用。

当设置了disabled以后，点击事件将不可用

<!DOCTYPE html>
<html>

<head>
  <script src='./jquery-3.4.1.min.js'></script>
  <meta charset="utf-8" />
</head>

<body>

  <button class="btn" id="btnClick">点击禁用自己</button>

  <button class="cancelBtn" id="btnClick">点击取消禁用前一个按钮</button>

</body>

<script>

  $(function() {

    $(".btn").click(e=>{
      $(e.currentTarget).attr('disabled','disabled') // 该操作之后，btn将不可以再点击
    })

    $(".cancelBtn").click(()=>{ // 改操作之后，btn可以继续进行点击
      $(".btn").removeAttr('disabled')
    })

  })
</script>

</html>