JavaScript/jQuery로 입력 텍스트 상자 비활성화 및 활성화
이 게시물에서는 JavaScript 및 jQuery에서 입력 텍스트 상자를 비활성화 및 활성화하는 방법에 대해 설명합니다.
요소가 비활성화되면 클릭을 허용할 수 없습니다. 입력 요소를 비활성화하려면 비활성화된 HTML 속성이 false여야 합니다.
1. jQuery 사용하기
jQuery를 사용하여 입력 상자 비활성화 속성을 true 또는 false로 설정하려면 다음을 사용할 수 있습니다. .prop() 기능.
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$(document).ready(function() { var disabled = false; $('#submit').click(function() { if (disabled) { $("#name").prop('disabled', false); // 비활성화된 경우 활성화 } else { $("#name").prop('disabled', true); // 활성화된 경우 비활성화 } disabled = !disabled; }) }); |
HTML
|
1 2 3 4 5 |
<div id="container"> <label for="name">Enter your name:</label> <input type="text" id="name" name="name"> </div> <button id="submit">Toggle</button> |
코드를 다음과 같이 단순화할 수 있습니다.
|
1 2 3 4 5 6 7 8 9 10 11 |
$(document).ready(function() { $('#submit').click(function() { var disabled = $("#name").prop('disabled'); if (disabled) { $("#name").prop('disabled', false); // 비활성화된 경우 활성화 } else { $("#name").prop('disabled', true); // 활성화된 경우 비활성화 } }) }); |
또는 다음을 사용할 수 있습니다. .attr() 설정하는 방법 disabled 입력 요소의 속성 및 .removeAttr() 입력 요소에서 속성을 제거합니다.
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 |
$(document).ready(function() { $('#submit').click(function() { var disabled = $("#name").attr('disabled'); if (disabled === undefined) { $("#name").attr('disabled', 'disabled'); } else { $("#name").removeAttr('disabled'); } }) }); |
HTML
|
1 2 3 4 5 |
<div id="container"> <label for="name">Enter your name:</label> <input type="text" id="name" name="name"> </div> <button id="submit">Toggle</button> |
2. JavaScript 사용하기
일반 JavaScript를 사용하면 다음을 사용할 수 있습니다. disabled 실제 DOM 개체의 속성을 사용하여 입력을 활성화하거나 비활성화합니다.
JS
|
1 2 3 4 5 6 7 8 9 |
document.getElementById('submit').onclick = function() { var disabled = document.getElementById("name").disabled; if (disabled) { document.getElementById("name").disabled = false; } else { document.getElementById("name").disabled = true; } } |
HTML
|
1 2 3 4 5 |
<div id="container"> <label for="name">Enter your name:</label> <input type="text" id="name" name="name"> </div> <button id="submit">Toggle</button> |
이것이 JavaScript 및 jQuery에서 입력 텍스트 상자를 활성화 및 비활성화하는 것입니다.
또한 참조: