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

短命女 2022-06-16 10:20 572阅读 0赞

知识点一：禁用思路

思路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>

效果如图所示 ：  
![这里写图片描述][SouthEast]

总结：

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

知识点三：按照思路2，

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

结果为：  
![这里写图片描述][SouthEast 1]

总结：

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

[SouthEast]: /images/20220616/bdd44562d1a547bc8accedeb80cd705c.png
[SouthEast 1]: /images/20220616/9a69b4ce825449c9a0e333228210c34e.png