jquery改变disabled的boolean状态的三种方法

前端技术 2023/09/01 JavaScript

第一种：改变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>

本文地址：https://www.stayed.cn/item/2559

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案