HTML DOM 입력 범위 비활성화 속성

<시간/>

HTML DOM 입력 범위 비활성화 속성은 범위 슬라이더를 비활성화해야 하는지 여부를 설정하거나 반환하는 데 사용됩니다. 범위 슬라이더가 비활성화되어야 함을 나타내는 true와 그렇지 않으면 false인 부울 값을 사용합니다. disabled 속성은 기본적으로 false로 설정됩니다. 그러나 비활성화된 요소는 기본적으로 회색으로 표시되며 클릭할 수 없습니다.

구문

다음은 −

의 구문입니다.

비활성화된 속성 설정 -

rangeObject.disabled = true|false;

여기에서 true=범위 슬라이더가 비활성화되고 false=범위 슬라이더가 비활성화되지 않습니다. 기본적으로 거짓입니다.

예시

입력 범위 비활성화 속성의 예를 살펴보겠습니다. -

<!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>

출력

이것은 다음과 같은 출력을 생성합니다 -

HTML DOM 입력 범위 비활성화 속성

비활성화 버튼을 클릭하면 지금 슬라이더를 이동할 수 없습니다 -

HTML DOM 입력 범위 비활성화 속성

위의 예에서 -

type="range" , id="RANGE1" ,name="VOL" −

형식의 입력 필드를 만들었습니다.

<form>
<input type="range" id="RANGE1" name="VOL">
</form>

그런 다음 사용자가 클릭할 때 disableRange() 메서드를 실행하는 DISABLE 버튼을 만들었습니다.

<button type=”button” onclick="disableRange()">DISABLE</button>

disableRange() 메서드는 getElementById() 메서드를 사용하여 유형 범위가 있는 입력 요소를 가져오고 비활성화된 속성을 true로 설정합니다. 이렇게 하면 범위 슬라이더를 움직일 수 없고 사용자가 더 이상 슬라이더와 상호 작용할 수 없습니다. 슬라이더는 이제 고정됩니다 -

function disableRange() {
   document.getElementById("RANGE1").disabled=true;
   document.getElementById("Sample").innerHTML = "The range slider is now disabled" ;
}