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>
  • 相关阅读:
    js let
    go 语言
    第二十七篇、使用MVVM布局页面
    第二十六篇、因为自定item(nav)而使系统右滑返回手势失效的解决方法
    第四篇、点赞的粒子动画
    第二十五篇、抽屉效果的核心代码
    第二十四篇、iOS 10版本适配
    第二十三篇、使用NSURLSession时需要注意一个内存泄漏问题
    第十四篇、Ajax与Json
    第十三篇、jQuery Mobile
  • 原文地址:https://www.cnblogs.com/zhwl/p/2343173.html
Copyright © 2011-2022 走看看