jquery 修改input输入框的 readOnly属性 && input输入框隐藏

HTML与JS交互实例

最新推荐文章于 2023-09-24 00:22:49 发布

weixin_30613343

最新推荐文章于 2023-09-24 00:22:49 发布

阅读量187

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/miye/p/7048737.html

本文介绍了一个使用HTML和JavaScript实现的房间数量输入框控制案例。通过JavaScript动态控制HTML中的输入框属性，实现了房间数量的修改功能，并展示了如何通过JS禁用和启用HTML输入框的只读属性。

html的代码

                    <div class="control-group">
                        <label class="control-label required"> <span
                            class="help-inline"><font color="red">*</font> </span>房间总数：
                        </label>
                        <div class="controls">
                            <input type="text" name="count" id="quantity1" 
                                style="width: 30px;" onchange="totalRooms(1)"
                                onkeyup="this.value=this.value.replace(/[^\d]/g,'') "
                                value="" 
                                readOnly="true"/> 
                                
                                &nbsp; 间&nbsp;&nbsp;&nbsp;&nbsp;
                                
                                <input class="btn btn-primary" type="button" value="修改总数"
                                onclick="editCount(1)" />
                        </div>
                    </div>

<script type="text/javascript">
function editCount(i) {
    //$("#quantity"+i).setAttribute("readOnly", false);
    //$("#quantity"+i).readOnly=false;
    $("#quantity"+i).removeProp("readOnly");
}


</script>

注释的前两种不可用,不知道原因,最后的removeProp可用

input输入框隐藏

        <span >
        <input value="${roomTypeList }" name="type" style="display:none;"/>
        <input value="${str }" name="str" style="display:none;"/>
        </span>

转载于:https://www.cnblogs.com/miye/p/7048737.html