zoukankan      html  css  js  c++  java
  • jquery 将disabled的元素置为enabled的三种方法

    在jquery中可以通过jqueryObj.attr("disabled","disabled")将页面中某个元素置为不可编辑或触发状态,但是在jquery的API reference中并没说明怎么将页面置为disable的元素重新置为可触发或可编辑的。
    这里发现可以采用三种的变通方法将置为disabled的元素状态改为enabled。
    第一种:改变disabled的boolean状态,具体代码及解释如下:
    复制代码 代码如下:

    $("button:eq(2)").click(function(){
    var text2=$("input:text:eq(2)");
    if(text2.attr("disabled")==false){
    //通过设置disabled的boolean属性将第三个text输入框disabled属性置为true
    text2.attr("disabled",true);
    }else{
    //通过将第三个text输入框disabled属性置为false来移除disabled属性
    text2.attr("disabled",false);
    }
    });

    第二种:移除disabled属性,具体代码及解释如下:
    复制代码 代码如下:

    $("button:eq(1)").click(function(){
    var text2=$("input:text:eq(1)");
    if(text2.attr("disabled")==false){
    //通过设置disabled的值将第二个text输入框置为disabled
    text2.attr("disabled","disabled");
    }else{
    //通过移除的方式将第二个text输入框的disable属性删除
    text2.removeAttr("disabled");
    }
    });

    第三种:改变disabled的值,具体代码及解释如下:
    复制代码 代码如下:

    $("button:eq(0)").click(function(){
    var text1=$("input:text:eq(0)");
    if(text1.attr("disabled")==""){
    // 或者text1.attr("disabled")==false
    //通过设置disabled的值将第一个text输入框置为disabled
    text1.attr("disabled","disabled");
    }else{
    //通过覆盖的方式将第一个text输入框中的disabled属性清除掉
    text1.attr("disabled","");
    }
    });

    完整的示例代码如下(已测试通过):
    复制代码 代码如下:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head> <script src="jquery的路径引入就行了"></script>
    <script type="text/javascript"><!--
    $(document).ready(function () {
    $("button:eq(0)").click(function () {
    var text1 = $("input:text:eq(0)");
    if (text1.attr("disabled") == "") {
    // 或者text1.attr("disabled")==false
    //通过设置disabled的值将第一个text输入框置为disabled
    text1.attr("disabled", "disabled");
    } else {
    //通过覆盖的方式将第一个text输入框中的disabled属性清除掉
    text1.attr("disabled", "");
    }
    });
    $("button:eq(1)").click(function () {
    var text2 = $("input:text:eq(1)");
    if (text2.attr("disabled") == false) {
    //通过设置disabled的值将第二个text输入框置为disabled
    text2.attr("disabled", "disabled");
    } else {
    //通过移除的方式将第二个text输入框的disable属性删除
    text2.removeAttr("disabled");
    }
    });
    $("button:eq(2)").click(function () {
    var text2 = $("input:text:eq(2)");
    if (text2.attr("disabled") == false) {
    //通过设置disabled的boolean属性将第三个text输入框disabled属性置为true
    text2.attr("disabled", true);
    } else {
    //通过将第三个text输入框disabled属性置为false来移除disabled属性
    text2.attr("disabled", false);
    }
    });
    });
    // --></script>
    </head>
    <body>
    <button>disabledNull</button>
    <input type="text" value="input something into me!" size="40"/>
    <br/>
    <button>disabledRemove</button>
    <input type="text" value="input something into me!" size="40"/>
    <br/>
    <button>disabledState</button>
    <input type="text" value="input something into me!" size="40"/>
    </body>
    </html>
  • 相关阅读:
    MessageDigest简介
    深入入门正则表达式(java)
    JAVA 正则 Pattern 和 Matcher
    理解Servlet过滤器 (javax.servlet.Filter)
    Java 之 I/O 系列 01 ——基础
    finally块中的代码一定会执行吗?
    wait(), notify(),sleep详解
    Java 多线程——基础知识
    集合迭代时对集合进行修改抛ConcurrentModificationException 原因 以及解决方案
    深入理解ServletRequest与ServletResponse
  • 原文地址:https://www.cnblogs.com/zhwl/p/2343173.html
Copyright © 2011-2022 走看看