数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究HTML DOM 输入范围 disabled 属性
该 HTML DOM 输入范围 disabled 属性用于设置或返回范围滑块是否应被禁用。它使用布尔值，其中 true 表示应禁用范围滑块，false 表示否则。默认情况下，disabled 属性设置为 false。但是，禁用的元素默认情况下会变灰且不可点击。
语法
以下是语法：-
设置 disabled 属性：-
rangeObject.disabled = true|false;
这里，true=range 滑块被禁用，false 表示范围滑块未被禁用。默认情况下为 false。
示例
让我们来看一个输入范围 disabled 属性的示例：-
<!DOCTYPE html>
<html>
<body>
<h1>Input range disabled Property</h1>
<form>
<input type="range" id="RANGE1" name="VOL">
</form>
<p>Disable the above range slider by clicking on the DISABLE button</p>
<button type="button" onclick="disableRange()">DISABLE</button>
<p id="Sample"></p>
<script>
function disableRange() {
document.getElementById("RANGE1").disabled=true;
document.getElementById("Sample").innerHTML = "The range slider is now disabled" ;
}
</script>
</body>
</html>
输出
这将产生以下输出：-
点击“禁用”按钮后，您现在无法移动滑块：-
在以上示例中：-
我们创建了一个包含在表单内的输入字段，其类型为“range”，id 为“RANGE1”，name 为“VOL”：-
<form> <input type="range" id="RANGE1" name="VOL"> </form>
然后，我们创建了一个“禁用”按钮，当用户点击时，它将执行 disableRange() 方法：-
<button type=”button” onclick="disableRange()">DISABLE</button>
该 disableRange() 方法使用 getElementById() 方法 获取类型为 range 的 输入元素，并将其 disabled 属性设置为 true。这使得范围滑块无法移动，用户也不能再与它交互。滑块现在被固定了：-
function disableRange() {
document.getElementById("RANGE1").disabled=true;
document.getElementById("Sample").innerHTML = "The range slider is now disabled" ;
}
更新于： 2023年11月22日
1K+ 次查看
广告