jQuery 입력 비활성화 및 활성화
Sheeraz Gul
2024년2월15일
입력 필드를 활성화 및 비활성화하는 것은 jQuery를 사용하는 쉬운 작업입니다. 이 튜토리얼은 jQuery에서 입력 필드를 비활성화하거나 활성화하는 방법을 보여줍니다.
jQuery 입력 비활성화
prop() 메서드는 jQuery를 사용하여 입력을 비활성화할 수 있습니다. 이 방법의 구문은 아래에 나와 있습니다.
prop('disabled', true)
true로 설정된 disabled 값의 두 매개변수를 사용합니다. prop() 메서드의 예를 살펴보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Disable Enable Input with jQuery</title>
<style>
label {
display: block;
margin: 10px 0;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$(".disable").click(function(){
if($(this).prop("checked") == true){
$('form input[type="text"]').prop("disabled", true);
}
});
});
</script>
</head>
<body>
<form>
<label><input type="checkbox" class="disable"> Check the box to disable the input fields below</label>
<label>Name: <input type="text" name="username"></label>
<label>ID: <input type="text" name="username"></label>
<label>Address: <input type="text" name="username"></label>
</form>
</body>
</html>
위의 코드는 상자를 선택하면 입력을 비활성화합니다. 출력 참조:
jQuery 활성화 입력
마찬가지로 prop 메서드는 jQuery의 입력을 활성화하는 데도 사용됩니다. 입력을 활성화하는 구문은 다음과 같습니다.
prop('disabled', false)
true 매개변수가 false로 변경되는 경우 입력을 활성화하는 예를 시도해 보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Disable Enable Input with jQuery</title>
<style>
label {
display: block;
margin: 10px 0;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$('form input[type="text"]').prop("disabled", true);
$(".disable").click(function(){
if($(this).prop("checked") == true){
$('form input[type="text"]').prop("disabled", false);
}
});
});
</script>
</head>
<body>
<form>
<label><input type="checkbox" class="disable"> Check the box to enable the input fields below</label>
<label>Name: <input type="text" name="username"></label>
<label>ID: <input type="text" name="username"></label>
<label>Address: <input type="text" name="username"></label>
</form>
</body>
</html>
위의 코드는 먼저 모든 필드를 비활성화한 다음 확인란을 선택하여 활성화합니다. 출력 참조:
작가: Sheeraz Gul
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook