JavaScript 비활성화 버튼 클릭
JavaScript에서 disabled 속성은 type="submit"으로 뿌리를 둔 버튼에 대해서만 제대로 작동합니다. 그렇지 않으면 "one submit button"처럼 작동하지 않습니다. 오히려 여러 제출을 수락합니다.
마찬가지로 jQuery 속성 disabled는 submit 유형의 버튼에 대해 작동합니다. 또한, 양식 제출 방법은 이와 관련하여 매우 중요합니다.
예제 세트에서 JavaScript disabled 속성과 jQuery disabled 속성의 구현을 볼 수 있습니다.
JavaScript disabled 속성을 사용하여 버튼 클릭 비활성화
일반적으로 제출 목적을 보장하기 위해 양식과 방법을 정의합니다. 그럼에도 불구하고 JavaScript의 disabled 속성을 사용하면 버튼을 비활성화할 수 있습니다.
여기에서 submit 유형을 나타내는 input 필드를 시작합니다. 나중에 input 태그의 인스턴스를 가져와 disabled 속성을 실행합니다.
코드 조각:
<body>
<p>Click the button to submit data!</p>
<p>
<input type='submit' value='Submit' id='btClickMe'
onclick='save();'>
</p>
<p id="msg"></p>
</body>
<script>
function save() {
var dis = document.getElementById('btClickMe').disabled = true;
var msg = document.getElementById('msg');
msg.innerHTML = 'Data submitted and the button disabled ☺';
}
</script>
</html>
출력:
jQuery disabled 속성을 사용하여 버튼 클릭 비활성화
jQuery에서 disabled 속성의 유사한 사용 사례가 있습니다. 여기서 차이점은 form 태그 내에서 input 필드(submit 유형 버튼)를 시작한다는 것입니다.
양식 내에서도 작동하는지 확인할 것입니다.
코드 조각:
<body>
<form id="fABC" action="#" method="POST">
<input type="submit" id="btnSubmit" value="Submit">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<input type="button" value="i am normal button" id="btnTest">
<script>
$(document).ready(function () {
$("#fABC").submit(function (e) {
e.preventDefault();
$("#btnSubmit").attr("disabled", true);
$("#btnTest").attr("disabled", true);
return true;
});
});
</script>
</body>
</html>
출력:
버튼을 비활성화하는 jQuery 방법은 JavaScript와 유사합니다. 예에서 disabled 속성이나 속성으로 처리할 수 없는 type=button이 있는 일반 버튼을 추가했습니다.
이것이 JavaScript 또는 jQuery disabled 속성이 제출 버튼을 비활성화하기 위해 작동하는 방식입니다.
