在jquery中使用checkbox控件标签的隐藏和显示

最新推荐文章于 2023-08-15 09:38:58 发布

原创最新推荐文章于 2023-08-15 09:38:58 发布 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #checkbox #控件

本文介绍了一个简单的JavaScript功能，通过点击checkbox来控制文本输入框的显示与隐藏，同时改变下拉框的可用状态。代码使用jQuery库简化DOM操作。

如图所示，当选中checkbox时，显示文本输入框，并使下拉框不可用；

当取消选中checkbox时，文本框隐藏，下拉框可用

代码如下：

<script src="js/jquery-1.9.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            
        })
        function changeState() {


            if ($("#chkInputNew").is(':checked')) {
                $("#sNew").show();
                $("#selProductName").attr("disabled", true);
            }
            else {
                $("#sNew").hide();
                $("#selProductName").attr("disabled", false);
            }
        }
    </script>

<select id="selProductName">
                    </select>
                    <input type="checkbox" id="chkInputNew" onclick="javascript:changeState();" />
                    请输入新品名<span id="sNew" style="display: none"><input type="text" id="txtNewName" name="txtNewName" /></span>