jquery实现复选和下拉切换

最新推荐文章于 2021-12-14 14:42:41 发布

new^

最新推荐文章于 2021-12-14 14:42:41 发布

阅读量380

点赞数 1

分类专栏： jquery

本文链接：https://blog.csdn.net/new_culture/article/details/52680012

版权

jquery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="../js/jquery-1.8.3.js"></script>
        <meta charset="UTF-8">
        <title>JSP Page</title>
  <h1 ><font size="3"><center>复选框和下拉框的切换</center></font></h1>
    <title>Document</title>
    <script>

    
        $(function () {
            $(".check").each(function () {
                $(this).change(function () {
                    if ($(this).prop("checked")) {
                        $("#select").attr("disabled",true)
                    }else{
                        $("#select").attr("disabled",false)
                    }
                })
            })
            $("#select").change(function(){
                if($("#select").val()!="choose"){
                    $(".check").attr("disabled",true);
                }else{
                    $(".check").attr("disabled",false);
                }
            })
        })
    </script>
</head>
<body>
	<center>
<input type="checkbox" name="checkbox" class="check" value="1"/>中文
<input type="checkbox" name="checkbox" class="check" value="2"/>英文
<input type="checkbox" name="checkbox" class="check" value="3"/>数字
<input type="checkbox" name="checkbox" class="check" value="4"/>符号<br>
<select id="select" style="margin-top: 20px;"> 
    <option value ="choose">请选择</option>
    <option value ="1">姓名</option>
    <option value ="2">地址</option>
    <option value ="3">邮箱</option>
    <option value ="4">国籍</option>
</select>
</center>
 	</body>
</html>