使用jQuery禁用、开启select标签方法

最新推荐文章于 2024-07-26 08:34:09 发布

xinghuo0007

最新推荐文章于 2024-07-26 08:34:09 发布

阅读量2.7w

点赞数

分类专栏： jquery笔记文章标签： jquery select 标签测试

本文链接：https://blog.csdn.net/xinghuo0007/article/details/71773945

版权

jquery笔记专栏收录该内容

15 篇文章 1 订阅

订阅专栏

知识点一：禁用思路

    思路1： 直接在select标签上添加disabled="disabled"属性
    思路2： 禁用select标签就是禁用select标签中所有的option选项---给select标
    签中的所有option加上disabled="disabled"属性

知识点二：按照思路1，写案例测试，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        select{  /*为了看到效果这里添加了宽和高*/
            width:100%;
            height:100px;
            margin:100px 0;
        }
    </style>

    <script src="../js/jquery-3.2.1.js"></script>
</head>
<body>
    <div id="div1">
        <select id="select1">
            <option value="1">我是第一个option</option>
            <option value="2">我是第二个option</option>
            <option value="3">我是第三个option</option>
            <option value="4">我是第四个option</option>
        </select>
    </div>
    <div id="select2">
        <select>
            <option value="1">我是第一个option</option>
            <option value="2">我是第二个option</option>
            <option value="3">我是第三个option</option>
            <option value="4">我是第四个option</option>
        </select>
    </div>
    <script>
        $(function(){
            $("select").each(function () {
                $(this).attr("disabled","disabled");
            });
        });
    </script>
</body>
</html>

效果如图所示：
这里写图片描述

总结：

1,这是select标签是不能展开的，也就是起到了禁用的效果

知识点三：按照思路2，

  //其余部分上思路1相同，省略
  $(function(){
            $("select option").each(function () {
                $(this).attr("disabled","disabled");
            });

结果为：
这里写图片描述

总结：

1，我们看到select标签还是可以展开的
2，但是除了第一个以外，其他option都是不能选择的

知识点四：

通过测试，我们发现：
1，在select标签上面添加disabled="disabled"属性，可以禁止select展开
2，在select标签的option上添加disabled="disabled"属性，可以让option禁止被选
中。

知识点五：

注意：
$("select option").each(function () {
     $(this).attr("disabled","disabled");
 });

 等价于：

$("select option").each(function () {
     $(this).attr("disabled","true");
});

知识点六：开启禁用

$("select option").each(function () {
     $(this).removeAttr("disabled");
});

注意：下面写法不能清除禁用效果

$("select").each(function () {
   $(this).attr("disabled","false");             
});
或者：
$("select").each(function () {
   $(this).attr("disabled","");             
});