用jquery禁用和恢复超链接

最新推荐文章于 2020-09-18 08:14:45 发布

Shaw-K-Zhou

最新推荐文章于 2020-09-18 08:14:45 发布

阅读量6.2k

点赞数 1

分类专栏：前端知识文章标签： jquery 超链接下拉列表事件

本文链接：https://blog.csdn.net/shawshank_zhou/article/details/17039189

版权

前端知识专栏收录该内容

2 篇文章 0 订阅

订阅专栏

html如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Insert title here</title>
</head>
<script type="text/javascript" src="jslib/jquery-1.8.2.js"></script>
<script type="text/javascript" src="demo.js"></script>
<body>
  <a href="www.baidu.com" id="reply" style="text-decoration: none;">答复</a>
  <select class="form-control" id="receiptStatus">
    <option value="0">---请选择---</option>
    <option value="1">已答复</option>
    <option value="2">未答复</option>
    <option value="3">未审批</option>
    <option value="4">正在审批</option>
  </select>
</body>
</html>

demo.js如下：

/*
 *需求：当用户选择“已答复”选项时禁用“答复”超链接
 */
 $().ready(function() {
    $("#receiptStatus").change(function() {
      if ($("#receiptStatus option:selected").text() == '已答复') {
        $("#reply").removeAttr('href');
      } else {
        $("#reply").attr("href", "http://www.baidu.com/");
      }
    });
  });