JavaScript 방법 비교: jQuery와 Vanilla를 사용하여 버튼 활성화 또는 비활성화

이 기사에서는 JavaScript를 사용하여 버튼을 활성화 또는 비활성화하는 방법에 대해 설명합니다. 먼저 일반 JavaScript에서 어떻게 작동하는지 살펴보고 나중에 jQuery를 사용하여 구현하는 방법을 살펴보겠습니다.

JavaScript는 인터넷의 핵심 기술 중 하나입니다. 대부분의 웹사이트에서 사용되며 플러그인 없이도 모든 최신 웹 브라우저에서 지원됩니다. 이 시리즈에서는 일상적인 JavaScript 개발에 도움이 되는 다양한 팁과 요령에 대해 논의하겠습니다.

JavaScript를 사용하면 특정 작업에 따라 버튼을 활성화하거나 비활성화해야 하는 경우가 많습니다. 일반적으로 양식 작업을 할 때 사용자가 양식의 모든 필수 필드를 채울 때까지 제출 버튼을 비활성화된 상태로 유지하려고 합니다. 사용자가 필수 필드를 모두 입력하면 사용자가 버튼을 클릭하여 양식을 제출할 수 있도록 자동으로 활성화하려고 합니다.

HTML에서 버튼 요소에는 고유한 상태가 있으므로 활성화 또는 비활성화 상태를 유지할 수 있습니다. 예를 들어 양식이 로드되는 동안 버튼을 비활성화된 상태로 유지할 수 있습니다. 나중에 JavaScript를 사용하여 활성화할 수 있습니다.

오늘은 몇 가지 실용적인 예와 함께 JavaScript를 사용하여 버튼을 활성화하거나 비활성화하는 방법에 대해 논의하겠습니다.

바닐라 JavaScript를 사용하여 버튼을 활성화하거나 비활성화하세요

이 섹션에서는 일반 JavaScript를 사용하여 버튼을 활성화하거나 비활성화하는 방법을 보여주는 실제 예를 설명합니다.

아래 예시를 살펴보겠습니다.

으아악

위 예에서는 몇 개의 텍스트 필드와 제출 버튼이 있는 매우 간단한 양식을 만들었습니다. 양식이 로드된 후에는 제출 버튼이 비활성화된다는 점에 유의하는 것이 중요합니다. disabled 속성을 사용하여 제출 버튼의 기본 상태를 비활성화로 설정합니다.

다음으로 사용자 이름과 비밀번호 입력 필드에 onchange 이벤트를 정의합니다. 따라서 사용자가 이러한 필드의 값을 변경하면 onchange 이벤트가 발생하고 최종적으로 toggleButton 함수가 호출됩니다. toggleButton 함수에서는 사용자가 두 필수 필드에 값을 입력했는지 확인합니다. 이 경우 제출 버튼의 onchange 事件。因此，当用户更改这些字段的值时，就会触发 onchange 事件，该事件最终调用 toggleButton 函数。在 toggleButton 函数中，我们检查用户是否在两个必填字段中输入了值。如果是这种情况，我们将提交按钮的 disabled 属性设置为 false，这最终会启用提交按钮，以便用户可以单击该按钮。另一方面，如果用户名或密码字段为空，我们将 disabled 属性设置为 true 속성을 false로 설정하여 궁극적으로 사용자가 클릭할 수 있도록 제출 버튼을 활성화합니다. 반면, 사용자 이름 또는 비밀번호 필드가 비어 있으면

속성을 true로 설정하여 사용자가 클릭할 수 없도록 제출 버튼을 비활성화합니다.

위 예에서는 입력 제출 버튼을 사용했지만 아래 예와 같이 HTML 버튼을 사용할 수도 있습니다.

으아악

일반 JavaScript를 사용하여 버튼을 활성화하거나 비활성화하는 방법입니다. 다음 섹션에서는 jQuery 라이브러리를 사용하는 방법을 알아봅니다.

jQuery를 사용하여 버튼을 활성화 또는 비활성화

이 섹션에서는 jQuery 라이브러리를 사용하여 버튼 상태를 전환하는 방법에 대해 설명합니다.

이전 섹션에서 설명한 예제를 수정해 보겠습니다.

으아악 attr먼저 함수에서 사용할 수 있도록 jQuery 라이브러리를 로드했습니다. 위 예제의 유일한 차이점은 jQuery 개체의

메서드를 사용하여 버튼 상태를 변경한다는 것입니다.

attr 方法用于设置或获取元素的特定属性的值。如果仅将其与单个参数一起使用，则它将用于获取属性的值。另一方面，如果将它与两个参数一起使用，则它用于设置属性的值。在我们的例子中，我们使用它来设置按钮的 disabledjQuery 개체의

메서드는 요소의 특정 속성 값을 설정하거나 가져오는 데 사용됩니다. 단일 매개변수와 함께 사용하는 경우 속성 값을 가져오는 데 사용됩니다. 반면에 두 개의 매개변수와 함께 사용하는 경우에는 속성의 값을 설정하는 데 사용됩니다. 우리의 경우에는 버튼의

속성 값을 설정하는 데 사용합니다. 그 외에는 모든 것이 동일합니다. prop 方法而不是 attr

jQuery 1.5 이상을 사용하는 경우 다음 코드 조각에 표시된 대로

메서드 대신 prop 메서드를 사용해야 합니다. removeAttr 方法，如以下代码片段所示。其结果与将 disabled 属性设置为 false 으아악

또는 요소의 속성을 제거하려면 다음 코드 조각에 표시된 대로 jQuery 개체의 removeAttr 메서드를 사용할 수도 있습니다. 결과는

속성을 false로 설정한 것과 같습니다.

으아악

다음은 jQuery를 사용하여 버튼을 활성화하거나 비활성화할 수 있는 다양한 방법입니다.

결론

🎜오늘 우리는 몇 가지 실용적인 예를 통해 JavaScript에서 버튼을 활성화하거나 비활성화하는 방법에 대해 논의했습니다. 일반 JavaScript 외에도 jQuery 라이브러리의 도움으로 이를 달성하는 방법도 논의했습니다. 🎜

위 내용은 JavaScript 방법 비교: jQuery와 Vanilla를 사용하여 버튼 활성화 또는 비활성화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!