jQuery - 제출 버튼을 활성화 / 비활성화하려면 어떻게해야합니까?
jQuery를 사용하여 버튼을 활성화 또는 비활성화하면 사용자의 상호 작용에 따라 몇 가지 이점이 있습니다. 이 코드를 다른 jQuery 구현과 함께 쉽게 사용할 수 있습니다. 시작하자.참을성이 없는 분들은 jQuery 1.6 이하 버전과 호환되는 prop() 함수를 사용할 수 있습니다:
$('.button').prop('disabled', true); 비활성화하려면
$('.button').prop('disabled', false); 버튼을 활성화하고 활성화하는 다른 기능을 더 알고 다른 사람들을 보려면 계속 읽어보시기 바랍니다.웹 개발에서 가장 인기 있는 문제는 제출 버튼을 두 번 클릭하는 것입니다. 때때로 사용자는 버튼을 클릭했는지 확인하기 위해 여러 번 클릭하지만 이로 인해 이중 유효성 검사가 발생합니다.
특히 jQuery 및 Ajax를 사용하여 HTML 양식을 만든 경우 버튼을 클릭할 때 페이지가 로드되는 동안 제출 버튼을 비활성화해야 합니다. 오류가 발생할 수 있으므로 사용자가 동일한 버튼을 두 번 클릭하지 않기를 원하기 때문입니다. 따라서 이러한 일이 발생하지 않도록 하려면 제출 버튼을 비활성화해야 합니다.
해결책은 사용자가 제출 버튼을 클릭한 후 비활성화하고 사용자에게 처리가 진행 중임을 보여주는 로딩 또는 메시지를 표시하는 것입니다.
제출 버튼 비활성화
jQuery로 제출 버튼을 비활성화하려면, 버튼 속성을 비활성화해야 합니다 Submit.
$('input:submit').click(function(){
$('input:submit').attr("disabled", true);
});
Enable submit button
제출 비활성화 버튼을 활성화하려면 "disabled" 속성의 값을 false로 변경하거나 "disabled" 속성을 제거합니다.
$('input:submit').attr("disabled", 거짓);
또는
('입력:제출').removeAttr("비활성화됨");
attr() 및 removeAttr() 함수는 버전 1.6.
Example 이후 jQuery에 통합되었다는 점을 제외하고는 prop() 함수와 동일한 역할을 합니다.
입력과 버튼이 포함된 간단한 HTML 양식을 만들 것입니다. 이 양식은 연락처 양식이며 사용자는 이름, 성, 이메일 주소 및 메시지를 지정해야 합니다. 아이디어는 사용자가 "보내기" 버튼을 두 번 클릭하는 것을 허용하지 않는 것입니다.
< 머리>
< 스크립트 src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js">
< 스타일>
input,textarea{
여백 하단:10px;
}
< 몸>
< 양식 action="" id="form" method="POST">
이름:
< 입력 id="name" name="name" type="text" />
이름:
< 입력 id="firstname" name="firstname" type="text" />
이메일:
< 입력 id="email" name="email" type="text" />
Message:
< textarea cols = "50"id="message" name="message" rows="5">
< input id="btn_envoyer" type="submit" value="Send" />
< 스크립트>
$(function()
{
$('#btn_envoyer').click(function()
{
$(this).attr("disabled", "disabled");
});
});