zoukankan      html  css  js  c++  java
  • 多个相同name的文本输入框,输入其中一个后,使剩下的不能输入值

    可以用blur或keyup事件响应;

    实现一:

    <body>

    <input type="text" id="AfterOtOt1" name="inputovertime" onkeyup="javascript:check(this);" />

    <input type="text" id="AfterOtOt2" name="inputovertime" onkeyup="javascript:check(this);"/>

    <input type="text" id="AfterOtOt3" name="inputovertime" onkeyup="javascript:check(this);" value="123"/>

    <input type="text" id="AfterOtOt4" />

    </body>

    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>

     <script type="text/javascript">

     

    	$(function() {
    		$("input[name=inputovertime]").each(function(index, content) {
    			if ($(content).val() == "" || $(content).val() == null) {
    				$(content).attr("disabled", "disabled"); //不可编辑
    			}
    		})
    	})

             function check(obj){

                                       if($(obj).val()!=""){

                                                $("input[name=inputovertime]").each(function (index, content) {

                                                if(obj!=content){   //如果name=inputovertime的input元素中不是当前已输入值的对象

                                                        $(content).attr("disabled", "disabled");   //不可编辑

                                                }

                                       })

                                       }else{

                                                $("input[name=inputovertime]").each(function (index, content) {  

                                                        $(content).removeAttr("disabled"); //初始化未输入时可编辑

                                       })

                                       }

             }

     </script>

    实现二:

    <body>
    <input type="text" id="AfterOtOt1" name="inputovertime"/>
    <input type="text" id="AfterOtOt2" name="inputovertime"/>
    <input type="text" id="AfterOtOt3" name="inputovertime"  value="123"/>
    <input type="text" id="AfterOtOt4" />
    </body>
    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
     
            $(function () {
    		$("input[name=inputovertime]").each(function(index,content){
    			if($(content).val()==""||$(content).val()==null){
    				$(content).attr("disabled", "disabled");   //不可编辑
    			}
    		})
     
                $("input[name=inputovertime]").keyup(function () {
                    if ($(this).val().length > 0) {
                        $(this).siblings("input[name=inputovertime]").attr('disabled', "disabled");//将除当前name=inputovertime输入值外的name为未输入值的input元素设置为disabled;
                    }
                    else {
                        $(this).siblings("input[name=inputovertime]").removeAttr('disabled');   // 将除当前name=inputovertime的未输入值的name=inputovertime的input元素设置为可编辑;
                    }
                })
            })
     
        </script>
  • 相关阅读:
    在页面生命周期执行时 Page 对象在 SaveState 阶段都发生了什么事?
    接收Firfox RESTClient #Post请求
    c# 单例模式[Singleton]之深夜闲聊
    JQuery 之 Ajax 异步和同步浅谈
    [模板]数学整合
    Yandex插件使用说明——Slager_Z
    模板练习(LUOGU)
    数学整合 新(LUOGU)
    [NOI.AC]DELETE(LIS)
    [NOI.AC]COUNT(数学)
  • 原文地址:https://www.cnblogs.com/shy1766IT/p/4884351.html
Copyright © 2011-2022 走看看