.
第一种:改变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>
分享到:
相关推荐
JQuery提供了一种简洁的方式来绑定事件处理器到元素上。 - **`.on('event', function())`**:绑定事件处理器到元素。 - **`.click(function())`**:为点击事件绑定事件处理器。 - **`.submit(function())`**:为...
除了 CSS 选择器外,JQuery 还支持使用 XPath 来选取页面中的元素,这为开发者提供了更强大的选择能力。 - `$("a[href]")`:选取所有带有 `href` 属性的 `<a>` 元素。 - `$("a[href='#']")`:选取所有 `href` 属性...
jQuery 使用名为 noConflict() 的方法来解决该问题。 var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号。 亲自试一试 结论 由于 jQuery 是为处理 HTML 事件而特别设计的,那么当您遵循...
#### 三、子元素选择器 - `[first-child]`:选择每个父元素的第一个子元素。 - `[last-child]`:选择每个父元素的最后一个子元素。 - `[only-child]`:选择是其父元素唯一子元素的元素。 - `nth-child(even)`:选择...
- `$("选择器").get(下标)`:将jQuery对象转换为原生DOM对象。 **转换原生对象为jQuery对象**: - `$(原生对象)`:将原生DOM对象转换为jQuery对象。 **操作CSS样式**: - `$(“对象”).css("属性名","值")`:更改...
- `:enabled` 和 `:disabled`:匹配启用或禁用的表单元素。 - `:checked` 和 `:selected`:匹配被选中的单选按钮、复选框和选项。 ### 二、jQuery对象与DOM对象 - **DOM对象**:通过JavaScript原生方法如`...
通过这些选择器,jQuery 提供了一种高效且简洁的方式来定位和操作网页上的元素,大大提高了开发效率。熟练掌握这些选择器,能让你在编写 JavaScript 代码时更加游刃有余。在实际应用中,可以灵活组合使用这些选择器...
### jQuery 使用方法案例详解 #### 一、选择器与元素选取 在 jQuery 中,选择器是获取页面元素的关键。选择器语法与 CSS 相似,但又具备更多强大的功能。 ##### 1. 基本选择器 - **通用选择器**:`$(" * ")` ...
### jQuery()选择器、函数与方法详解 #### 一、jQuery选择器 jQuery 提供了丰富的选择器,这些选择器可以极大地简化 HTML 元素的选择过程。以下是一些常用的选择器及其具体用法: 1. **基本选择器** - `*`:选择...
选择器是jQuery的核心之一,它提供了一种灵活的方式来定位页面中的元素。以下是一些常用的选择器及其解释: 1. **通用选择器**:`$("*")` — 选取文档中的所有元素。 2. **ID选择器**:`$("#id")` — 选取具有特定...
jQuery 提供了一系列方法来简化表单元素的操作: **设置/获取表单元素的值**: ```javascript $("input").val("Hello"); // 设置输入框的值 var value = $("input").val(); // 获取输入框的值 ``` **设置/获取复选...
这段代码会遍历页面上所有的input元素,对其中的enabled状态的元素执行css方法,改变它们的背景颜色为红色。 实例演示: 为了更直观地理解":enabled"选择器的用法,下面给出一个具体的示例代码。这个示例中包含了一...
### jQuery选择器详解 在网页开发中,jQuery作为一款轻量级、功能强大的JavaScript库,极大地简化了HTML文档遍历、事件...在实际项目中,熟练掌握并运用这些选择器,将有助于我们更加高效地进行页面元素的定位和操作。
- 可以通过 `[0]` 或 `.get(0)` 方法将 jQuery 对象转换回 DOM 元素。 ```javascript var $domToJqueryObject = $("#testDiv"); var domElement = $domToJqueryObject[0]; ``` - 如果需要遍历每个元素,可以...
例如,`$("#object").css("background", "color")`将选中ID为`object`的元素,并修改其背景颜色。 3. **层次选择器**:如`parent > child`、`prev + next`等,用于选取具有特定层次关系的元素。例如,选取`div`元素...
反之,若需要将JQuery对象转换为DOM对象,可以使用`.get(0)`或直接索引`[0]`。数组作为JavaScript的基本类型,不需要转换即可直接使用。 JQuery的选择器系统强大且灵活,包括基本选择器(如`:first`, `:last`)、...
`:enabled` 和 `:disabled` 选择启用或禁用的输入元素;`:selected` 和 `:checked` 选择选中或被选中的元素。 接下来,我们讨论jQuery的事件方法。这些方法允许开发者响应用户的交互行为,例如点击、提交表单等: ...
JQuery 是一个流行的 JavaScript 库,它极大地简化了网页元素的操作和事件处理。选择器是 JQuery 的核心功能之一,它们允许开发者高效地选取页面上的特定元素进行操作。下面将详细介绍给定文件中提及的各类 JQuery ...