jquery에서 필드를 편집할 수 없도록 설정하는 방법-프런트엔드 Q&A-php.cn

집

웹 프론트엔드

프런트엔드 Q&A

jquery에서 필드를 편집할 수 없도록 설정하는 방법

PHPz

Apr 26, 2023 pm 02:22 PM

프런트엔드 개발에서는 양식을 생성하고 사용자가 양식 내용을 입력할 수 있도록 해야 하는 경우가 많습니다. 양식의 여러 필드는 서로 다른 상태로 설정되어야 하며, 일부 필드는 읽기 전용이고, 일부 필드는 완전히 비활성화해야 할 수도 있습니다. 이러한 시나리오에서는 jQuery를 사용하여 필드를 편집할 수 없게 만들 수 있습니다.

1. 필드를 편집할 수 없도록 설정해야 하는 이유

실제 응용 프로그램에서는 양식의 일부 필드를 편집할 수 없도록 설정해야 하는 경우가 많습니다. 예:

사용자가 양식에서는 데이터 보안을 보장하기 위해 양식 필드를 잠가서 사용자가 제출된 정보를 수정하지 못하도록 해야 합니다.
계정 비밀번호, SMS 인증 코드 등과 같은 일부 민감한 정보는 사용자가 수정하지 못하도록 읽기 전용 모드로 설정해야 합니다.
특정 조건에서는 양식의 일부 필드를 비활성화해야 합니다. 예를 들어 결제 시 특정 결제 수단을 선택한 경우 사용자가 결제 금액 및 기타 정보를 수정하는 것을 금지해야 합니다.

2. jQuery를 사용하여 필드를 편집 불가능으로 설정하는 방법

jQuery는 HTML 문서 작업, 이벤트 처리, 애니메이션 효과 및 기타 작업을 단순화하는 데 사용할 수 있는 매우 인기 있는 JavaScript 라이브러리입니다. jQuery에서는 attr() 함수를 사용하여 텍스트 상자, 드롭다운 상자, 확인란 및 기타 요소의 편집 불가능한 상태를 설정할 수 있습니다.

이제 간단한 샘플 코드를 살펴보겠습니다.

jQuery The 설정 필드는 편집할 수 없습니다

<script> $(document).ready(function(){ // 텍스트 상자 비활성화 $("input[type='text']").attr("disabled", "disabled"); // 드롭 비활성화 -down Box $("select").attr("disabled", "disabled"); // 체크박스 비활성화 $("input[type='checkbox']").attr("disabled", " 비활성화됨"); }); </script>

3. jQuery는 필드의 읽기 전용 및 비활성화 상태를 구현합니다.

위 예에서는 비활성화 속성을 사용하여 양식 요소를 비활성화했습니다. 하지만 양식 요소를 읽기 전용 상태로 설정해야 한다면 어떻게 될까요? 이때 readonly 속성을 설정하면 가능합니다.

읽기 전용 속성과 비활성화된 속성의 차이점은 읽기 전용 속성은 사용자가 양식 요소의 값을 편집하는 것을 금지하지만 사용자는 여전히 JS 스크립트 및 기타 방법을 통해 요소의 값을 수정할 수 있다는 것입니다. 비활성화된 속성은 양식 요소를 완전히 비활성화하며 사용자는 해당 요소를 작동할 수 없습니다.

이제 필드의 읽기 전용 및 비활성화 상태를 구현하는 샘플 코드를 살펴보겠습니다.

jQuery는 필드를 읽기 전용 및 비활성화 상태로 설정합니다