HOWTO · jQuery
jQuery 입력 비활성화 및 활성화
이 튜토리얼은 jQuery에서 입력을 비활성화 및 활성화하는 방법을 보여줍니다.
이 페이지의 내용
입력 필드를 활성화 및 비활성화하는 것은 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>
위의 코드는 먼저 모든 필드를 비활성화한 다음 확인란을 선택하여 활성화합니다. 출력 참조:
