zoukankan      html  css  js  c++  java
  • IE浏览器无法直接识别input的type="hidden"问题

    原问题:

    <td class="formValue" id="in-checkbox">
        <label class="checkbox-inline">
            <input type="hidden" name="allUserObj.execute" value="" id="allExecute"/>
        //type=“hidden”在前面,IE无法识别hidden类型,导致每次点击都是取它的值 <input type="checkbox" id="userAll" class="checkbox-blue" value="0"/><b></b>所有用户 </label> <label class="checkbox-inline"> <input type="checkbox" id="userOrgObj_checkbox" class="checkbox-blue" value="1" checked="checked"/> <b></b>组织机构 </label> <label class="checkbox-inline"> <input type="checkbox" id="assignUserObj_checkbox" class="checkbox-blue" value="2" checked="checked"/><b></b>自定义用户 </label> </td>
    /*执行复选框勾选逻辑*/
    $("#in-checkbox input").each(function(){
        $(this).on("click",function(){
        var state=$(this).prop("checked");
        var type=$(this).val();
        switch (type) {
            case "0":
                if(state){
                    $("#in-checkbox input").prop("checked",false);
                    $("#in-checkbox input").prop("disabled","disabled");
                    $("#in-checkbox input").toggleClass("checkbox-blue",false).toggleClass("checkbox-disable",true);
                    $("#out-checkbox input").removeAttr("disabled");
                    $("#out-checkbox input").toggleClass("checkbox-blue",true).toggleClass("checkbox-disable",false);
                    $("#executeTr .contents").hide();
                    $(this).prop("checked",true);
                     $(this).removeAttr("disabled"); 
                     $(this).prev().removeAttr("disabled"); 
                     $(this).toggleClass("checkbox-blue",true).toggleClass("checkbox-disable",false);
                    $("#allExecute").val("true");
                }else{
                    $("#in-checkbox input").prop("checked",true);
                    $("#in-checkbox input").removeAttr("disabled");
                    $("#in-checkbox input").toggleClass("checkbox-blue",true).toggleClass("checkbox-disable",false);
                    $("#out-checkbox input").prop("checked",false);
                    $("#out-checkbox input").prop("disabled","disabled");
                    $("#out-checkbox input").toggleClass("checkbox-blue",false).toggleClass("checkbox-disable",true);
                    $("#executeTr .contents").show();
                    $("#notExecuteTr .contents").hide();
                    $(this).prop("checked",false);
                    $("#allExecute").val("false");
                }
                break;
            case "1":
                if(state){
                    $("#allExecute").val("false");
                    $("#orgInTr").show();
                    $("#orgOutTr").hide();
                    $("#out-checkbox input").eq(0).prop("checked",false);
                    $("#out-checkbox input").eq(0).prop("disabled","disabled");
                    $("#out-checkbox input").eq(0).toggleClass("checkbox-blue",false).toggleClass("checkbox-disable",true);
                        
                    $("#userAll").prop("checked",false);
                   }else{
                       $("#out-checkbox input").eq(0).removeAttr("disabled");
                    $("#out-checkbox input").eq(0).toggleClass("checkbox-blue",true).toggleClass("checkbox-disable",false);
                        
                    $("#orgInTr").hide();
                   }
                break;
            case "2":
                 if(state){
                    $("#allExecute").val("false");
                   $("#userInTr").show();
                   $("#userOutTr").hide();
                   $("#out-checkbox input").eq(1).prop("checked",false);
                   $("#out-checkbox input").eq(1).prop("disabled","disabled");
                    $("#out-checkbox input").eq(1).toggleClass("checkbox-blue",false).toggleClass("checkbox-disable",true);
                        
                   $("#userAll").prop("checked",false);
                 }else{
                     $("#out-checkbox input").eq(1).removeAttr("disabled");
                    $("#out-checkbox input").eq(1).toggleClass("checkbox-blue",true).toggleClass("checkbox-disable",false);
                        
                         $("#userInTr").hide();
                 }
                break;
            default:
                break;
            }
        });
    });

     

      在IE下点击第一个所有对象不起效果,原因就在于IE无法识别hidden类型导致点击的时候总是先取hidden类型的值,所以var type=$(this).val();始终为空。而其他浏览器可以识别hidden类型,所以没有问题。

      解决方式:将隐藏域hidden类型放到后面即可

    <td class="formValue" id="in-checkbox">
        <label class="checkbox-inline">
            <input type="checkbox" id="userAll" class="checkbox-blue" value="0"/><b></b>所有用户
            <input type="hidden" name="allUserObj.execute" value="" id="allExecute"/>//放到后面即可
        </label>
        <label class="checkbox-inline">
            <input type="checkbox" id="userOrgObj_checkbox" class="checkbox-blue" value="1" checked="checked"/> <b></b>组织机构
        </label>
        <label class="checkbox-inline">
            <input type="checkbox" id="assignUserObj_checkbox" class="checkbox-blue" value="2" checked="checked"/><b></b>自定义用户
        </label>        
    </td>

      自己写段代码测试下:

    <html>
    <head>
    <meta charset="utf-8">
        <title>无标题页</title>
    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
    <script type="text/javascript" language="javascript">
    $(function(){
        $('#preview input').click(function(){  
            var menu_id = $(this).val();  
            confirm(menu_id); 
        })
    })  
    </script>
    </head>
    <body>
    <a id="preview" href="javascript:void(0)">
        <label>预览  
            <input type="hidden" value="0">                <!-- IE下弹0,input框不选中 -->
            <input type="checkbox" value="2"></input>      <!-- 谷歌火狐下弹2,input框选中 -->
        </label>
        <label>编辑
            <input type="hidden" value="1">                <!-- IE下弹1,input框不选中 -->
            <input type="checkbox" value="3"></input>      <!-- 谷歌火狐下弹3,input框选中 -->
        </label>
    </a>
    </body>
    </html>

      hidden类型放于下面IE下即可正常。

    补充:

      需要注意一点的是:当隐藏域放在隐藏的元素里时,哪怕根据id去获取隐藏域的值,也是获取不到的,所以需要将隐藏域放到隐藏的元素外面。所以将隐藏域放在显示的input后面也不是明智之举,如果涉及到隐藏的情况的话就会影响到获取值。

  • 相关阅读:
    juypter4.4.0 自动补全
    Pytorch安装教程(Windows)
    编写你的第一个油猴脚本
    油猴(Tampermonkey)安装教程
    解决Linux系统下每次打开终端自动进入base环境
    Pytorch安装教程(Linux)
    Miniconda软件安装教程(Linux)
    解决vscode中使用pytorch时pylint报错Module torch has no xxx member
    解决pytorch报错ImportError: numpy.core.multiarray failed to import
    Miniconda软件安装教程(Windows)
  • 原文地址:https://www.cnblogs.com/goloving/p/7160814.html
Copyright © 2011-2022 走看看