attr() 및 removeAttr() 메서드를 사용하여 HTML 입력 항목을 비활성화/활성화하는 방법

2024-04-16

HTML 입력 항목을 jQuery로 비활성화/활성화하는 방법

prop() 메서드는 선택된 요소의 속성과 값을 설정하거나 반환하는 데 사용됩니다. 입력 항목을 비활성화하려면 다음과 같이 prop() 메서드를 사용하여 disabled 속성을 true로 설정합니다.

$("#inputId").prop("disabled", true);

입력 항목을 활성화하려면 disabled 속성을 false로 설정합니다.

$("#inputId").prop("disabled", false);

attr() 및 removeAttr() 메서드 사용:

attr() 메서드는 요소의 속성 값을 설정하는 데 사용됩니다. removeAttr() 메서드는 요소에서 속성을 제거하는 데 사용됩니다. 입력 항목을 비활성화하려면 attr() 메서드를 사용하여 disabled 속성을 "disabled"로 설정합니다.

$("#inputId").attr("disabled", "disabled");

입력 항목을 활성화하려면 removeAttr() 메서드를 사용하여 disabled 속성을 제거합니다.

$("#inputId").removeAttr("disabled");

예제:

다음 예제에서는 버튼을 클릭하면 입력 항목을 비활성화하고 활성화하는 방법을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
<title>Disable/Enable Input with jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="text" id="inputId" value="Hello">
<button id="disableButton">Disable</button>
<button id="enableButton">Enable</button>

<script>
$(document).ready(function() {
  $("#disableButton").click(function() {
    $("#inputId").prop("disabled", true);
  });

  $("#enableButton").click(function() {
    $("#inputId").prop("disabled", false);
  });
});
</script>
</body>
</html>

이 예제에서는 disableButton을 클릭하면 inputId 입력 항목이 비활성화되고 enableButton을 클릭하면 활성화됩니다.

참고:

  • jQuery 1.7 이상 버전을 사용하는 경우 prop() 메서드를 사용하는 것이 좋습니다. 이 메서드는 attr() 메서드보다 성능이 더 좋습니다.
  • disabled 속성을 설정하면 입력 항목이 비활성화되고 사용자가 값을 입력하거나 변경할 수 없게 됩니다.
  • readonly 속성을 설정하면 입력 항목이 읽기 전용으로 설정되고 사용자가 값을 변경할 수 없지만 여전히 값을 입력할 수 있습니다.

이 답변이 도움이 되었기를 바랍니다! 궁금한 점이 있으면 알려주세요.




예제 코드: HTML 입력 항목을 jQuery로 비활성화/활성화하기

예제 1: prop() 메서드 사용

<!DOCTYPE html>
<html>
<head>
<title>Disable/Enable Input with jQuery (prop method)</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="text" id="inputId" value="Hello">
<button id="disableButton">Disable</button>
<button id="enableButton">Enable</button>

<script>
$(document).ready(function() {
  $("#disableButton").click(function() {
    $("#inputId").prop("disabled", true);
  });

  $("#enableButton").click(function() {
    $("#inputId").prop("disabled", false);
  });
});
</script>
</body>
</html>

이 예제에서는 attr()removeAttr() 메서드를 사용하여 입력 항목을 비활성화/활성화하는 방법을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
<title>Disable/Enable Input with jQuery (attr and removeAttr methods)</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="text" id="inputId" value="Hello">
<button id="disableButton">Disable</button>
<button id="enableButton">Enable</button>

<script>
$(document).ready(function() {
  $("#disableButton").click(function() {
    $("#inputId").attr("disabled", "disabled");
  });

  $("#enableButton").click(function() {
    $("#inputId").removeAttr("disabled");
  });
});
</script>
</body>
</html>

설명:

  • 두 예제 모두 inputId라는 ID를 가진 HTML 입력 항목을 사용합니다.
  • disableButtonenableButton이라는 두 개의 버튼도 있습니다.
  • disableButton을 클릭하면 입력 항목이 비활성화됩니다.

코드 작동 방식:

  • 예제 1:
    • $("#disableButton").click() 이벤트 처리기는 $("#inputId").prop("disabled", true); 코드를 실행하여 입력 항목을 비활성화합니다.
  • 위 예제는 jQuery 1.7 이상 버전을 사용합니다.
  • prop() 메서드는 attr() 메서드보다 성능이 더 좋기 때문에 prop() 메서드를 사용하는 것이 좋습니다.



HTML 입력 항목을 비활성화/활성화하는 다른 방법

disabled 속성 사용:

HTML 입력 항목을 작성할 때 disabled 속성을 직접 사용할 수 있습니다. 예를 들어 다음과 같이 입력 항목을 비활성화할 수 있습니다.

<input type="text" id="inputId" value="Hello" disabled>
<input type="text" id="inputId" value="Hello">

JavaScript를 사용하여 입력 항목을 비활성화/활성화할 수도 있습니다. 다음은 getElementById() 함수와 disabled 속성을 사용하여 입력 항목을 비활성화하는 방법입니다.

var input = document.getElementById("inputId");
input.disabled = true;

다음은 setAttribute() 메서드를 사용하여 입력 항목을 비활성화하는 방법입니다.

var input = document.getElementById("inputId");
input.setAttribute("disabled", "disabled");
var input = document.getElementById("inputId");
input.disabled = false;

// 또는

var input = document.getElementById("inputId");
input.removeAttribute("disabled");
<!DOCTYPE html>
<html>
<head>
<title>Disable/Enable Input with JavaScript</title>
</head>
<body>
<input type="text" id="inputId" value="Hello">
<button id="disableButton">Disable</button>
<button id="enableButton">Enable</button>

<script>
var input = document.getElementById("inputId");
var disableButton = document.getElementById("disableButton");
var enableButton = document.getElementById("enableButton");

disableButton.addEventListener("click", function() {
  input.disabled = true;
});

enableButton.addEventListener("click", function() {
  input.disabled = false;
});
</script>
</body>
</html>

javascript jquery html-input


jQuery를 사용하여 텍스트 상자의 값을 가져오는 방법

val() 메서드는 텍스트 상자의 현재 값을 가져오거나 설정하는 데 사용됩니다. 텍스트 상자의 값을 가져오려면 다음과 같이 val() 메서드를 호출하면 됩니다.위 코드는 type 속성이 "text"인 모든 텍스트 상자의 값을 가져옵니다...


Node.js로 로컬 IP 주소 확인하기: 두 가지 간단한 방법

os 모듈 사용Node. js의 기본 모듈인 os를 사용하면 시스템 정보에 액세스할 수 있으며, 여기에는 로컬 IP 주소도 포함됩니다. 다음 코드는 os 모듈을 사용하여 로컬 IP 주소를 가져오는 방법을 보여줍니다...


jQuery에서 click() vs on('click') 차이점

이벤트 바인딩 방식click(): 특정 요소에 직접 이벤트 핸들러를 바인딩합니다.on('click'): 이벤트 핸들러를 선택자 또는 요소에 바인딩하고, 선택된 요소 또는 하위 요소에 클릭 이벤트가 발생할 때 트리거됩니다...


Node.js에서 'Error: listen EADDRINUSE' 오류 해결하기: 대체 방법

Node. js를 사용하여 서버를 실행하려고 할 때 "Error: listen EADDRINUSE" 오류가 발생할 수 있습니다. 이 오류는 사용하려는 포트가 이미 다른 프로그램에 의해 사용되고 있음을 의미합니다.해결 방법...


브라우저 크기 변경에 대한 React 뷰 다시 렌더링하기: 성능 최적화 팁

window. addEventListener 사용하기:이 코드는 브라우저 크기가 변경될 때마다 resize 이벤트 리스너 함수를 호출합니다. 이 함수 내에서 뷰를 다시 렌더링하는 데 사용할 수 있는 코드를 작성할 수 있습니다...


javascript jquery html input