자바스크립트와 jQuery를 어떻게 사용해서 단추를 사용하지 않거나 사용합니까?
만약 초보자거나 자바스크립트나 jQuery에 익숙하지 않다면, 전체 문장을 통독하는 것을 권장합니다.그러나 코드만 찾고 있다면 click here!
카탈로그
비활성화/활성화 버튼 소개
웹 폼을 작성할 때, 우리가 모든 필수 필드를 작성하지 않으면, '제출' 단추가 작동할 수 없다는 것을 자주 알고 계십니까?
이것은 입력 필드가 채워졌는지 비어 있는지 여부에 따라 단추의 상태를 제어합니다. (사용/사용 안 함)같은 원칙도 복선상자와 라디오 단추에 적용된다.
웹 폼에서도 이러한 기능을 실현하기를 원하십니까?읽어라!
코드를 깊이 연구하기 전에 단추의 서로 다른 상태에서 전환하는 배후의 논리를 살펴보자.
버튼의 비활성화와 활성화 상태 사이를 전환하는 논리
버튼 상태 변경 코드 구현
1. Javascript 사용
A） HTML
편집기에 다음 HTML 코드 추가
//defining button and input field
<input class="input" type="text" placeholder="fill me">
<button class="button">Click Me</button>
코드 해석
위 코드를 사용하여 텍스트 필드와 버튼을 입력하는 두 가지 HTML 요소를 정의했습니다.
B) Javascript 코드
//Program to disable or enable a button using javascript
<script>
let input = document.querySelector(".input");
let button = document.querySelector(".button");
button.disabled = true; //setting button state to disabled
input.addEventListener("change", stateHandle);
function stateHandle() {
if (document.querySelector(".input").value === "") {
button.disabled = true; //button remains disabled
} else {
button.disabled = false; //button is enabled
}
}
</script>
코드 해석
전체 코드
<html>
<body>
<input class="input" type="text" placeholder="fill me">
<button class="button">Click Me</button>
</body>
<script>
let input = document.querySelector(".input");
let button = document.querySelector(".button");
button.disabled = true;
input.addEventListener("change", stateHandle);
function stateHandle() {
if (document.querySelector(".input").value === "") {
button.disabled = true;
} else {
button.disabled = false;
}
}
</script>
</html>
출력
A) 비활성 상태
텍스트 필드가 비어 있기 때문에 이 단추는 비활성화됩니다
B) 활성 상태
텍스트 필드가 비어 있지 않으므로 이 버튼이 활성화되었습니다.
jQuery를 사용하여 버튼 사용/사용 안 함
<html>
<head>
<title>jQuery - Enable or Disable Button</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
Name: <input type="text" id="tbName" />
<input type="submit" id="submit" disabled="disabled" />
</body>
<script>
$(document).ready(function () {
$('#tbName').on('input change', function () {
if ($(this).val() != '') {
$('#submit').prop('disabled', false);
}
else {
$('#submit').prop('disabled', true);
}
});
});
</script>
</html>
형상화
당신은 this editor를 사용하여 상술한 코드를 조작하고 코드의 어느 부분이 어떤 역할을 하는지 볼 수 있습니다.너도 다른 CSS 단추 옵션 등을 시도할 수 있다.
Reference
이 문제에 관하여(자바스크립트와 jQuery를 어떻게 사용해서 단추를 사용하지 않거나 사용합니까?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/tutorialskeptsimple/how-to-disable-or-enable-buttons-using-javascript-and-jquery-4h5m텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
