jQuery를 사용하여 버튼을 활성화/비활성화하려면 사용자 입력을 허용할지 여부를 결정하는 기능을 변경해야 합니다. 이는 일반적으로 '.prop()' 또는 '.attr()'과 같은 jQuery 메소드를 통해 '비활성화' 속성을 조작하여 수행됩니다.
jQuery를 사용하여 버튼을 활성화/비활성화하려면 JavaScript/jQuery와 함께 기본 HTML 구조가 필요합니다. 다음은 시작하기 위한 간단한 코드 구조입니다.
HTML 버튼 활성화/비활성화제목><script src= 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'>스크립트> 머리> <body> <button id='myButton'>나버튼 클릭><script>$(document).ready(function(){ // 버튼을 활성화/비활성화하는 jQuery 코드 // 여기에 코드 추가 }); 스크립트> 본문> html>></pre> </code> <p dir='ltr'> <br></p> <br><div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br> <h2><span>jQuery를 사용하여 버튼을 활성화/비활성화하는 예</span></h2><h3><span>1. .prop() 메서드 사용:</span></h3><p dir='ltr'><span>사용</span> <span>jQuery의 .prop()</span> <span>버튼을 활성화/비활성화하려면 '비활성화' 속성을 true 또는 false로 설정하여 애플리케이션 요구 사항 및 사용자 상호 작용을 기반으로 하는 상호 작용을 효율적으로 제어해야 합니다.</span></p> <p dir='ltr'> <b> <strong>예:</strong> </b> <span>이 예에서는 jQuery를 사용하고 있습니다. .prop() 메서드를 사용하여 원활한 사용자 상호 작용을 위해 클릭 및 두 번 클릭 이벤트에서 버튼의 '비활성화' 속성을 전환합니다.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <script src= 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'>스크립트> 머리> <body> <h3>.prop() 메소드 사용h3> <button id='update'>업데이트 버튼><div style='margin-top: 50px'> <button id='change'>나를 클릭하세요버튼> div><script>$('#change').on('click', function () { $('#update').prop( 'disabled', true ); }); $('#change').on( 'dblclick', function () { $('#update').prop( 'disabled', false ); } ); 스크립트> 본문> html>></pre> </code> <p dir='ltr'> <b> <strong>산출:</strong> </b> </p> <img src='//techcodeview.com/img/blogathon-2021/17/how-enable-disable-button-using-jquery.webp' alt="Jquery토글"><p>.prop() 메서드 예제 출력</p> <h3><span>2. .attr() 메소드 사용</span></h3><p dir='ltr'><span>사용하여</span> <span>.attr() 메소드</span> <span>jQuery에서는 요소의 'disabled' 속성을 전환합니다. 버튼을 클릭하면 다른 버튼이 비활성화되고, 두 번 클릭하면 다시 활성화되어 웹 페이지 내에서 사용자 상호 작용과 기능이 향상됩니다.</span></p> <p dir='ltr'> <b> <strong>예:</strong> </b> <span>이 예에서는 버튼을 활성화/비활성화하기 위해 .attr() 메서드를 사용하고 있습니다. 클릭하면 다른 버튼이 비활성화됩니다. 두 번 클릭하면 다시 활성화되어 사용자 상호 작용과 웹 기능이 향상됩니다.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <script src= 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'>스크립트> 머리> <body> <h3>.attr() 메소드 사용h3> <button id='update'>업데이트 버튼><div style='margin-top: 50px;'> <button id='change'>나버튼> div>를 클릭하세요.<script>$('#change').on('click', function () { $('#update').attr('disabled', 'disabled'); }); $('#change').on('dblclick', function () { $('#update').removeAttr('disabled'); }); 스크립트> 본문> html>></pre> </code> <p dir='ltr'> <b> <strong>산출:</strong> </b> </p> <p> <br></p> <img src='//techcodeview.com/img/blogathon-2021/17/how-enable-disable-button-using-jquery-2.webp' alt="JqueryToggle2"><p>.attr() 메소드 출력 예</p> <p> <br></p> <br> <br></article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article>
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
</div><!--//primary-->
<div class="secondary col-md-4 col-sm-12 col-xs-12">
<aside class="info aside section">
<div class="section-inner">
<h2 class="">범주</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/medlife/">메드라이프</a> </li><li> <a href="/us-gk/">미국 Gk</a> </li><li> <a href="/ai-blogs/">Ai 블로그</a> </li><li> <a href="/oracle-tutorial/">오라클 튜토리얼</a> </li><li> <a href="/android-tips-tricks/">안드로이드 팁 트릭</a> </li><li> <a href="/python-math-library-functions/">Python 수학 라이브러리 함수</a> </li><li> <a href="/xml-tutorial/">Xml 튜토리얼</a> </li><li> <a href="/r-functions/">R 함수</a> </li><li> <a href="/process-synchronization/">프로세스 동기화</a> </li><li> <a href="/misc/">기타</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<div class="content">
<div class="item">
<div class="rekl_placeholder" id="sidebar_placeholder_1"> <script type="text/javascript">atOptions = {'key' : 'f53f1abf3c3a788f849c12a956865db1','format' : 'iframe','height' : 300,'width' : 160,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">LiveLeak 대안</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> YouTube, ThopTV, 대안, 채팅 대안, 메시지 대안, 비디오 플레이어 대안, 토끼 대안 등을 포함한 LiveLeak 대안</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/liveleak-alternative"> <i class="fa fa-external-link"></i> 자세히보기</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">재미있는 기사</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/java-throwable-class/">Java Throwable 클래스</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/spring-jdbctemplate-tutorial">Spring JdbcTemplate 튜토리얼</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/backend-development/">백엔드 개발</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/jackson-tutorial/">잭슨 튜토리얼</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/length-array-c">C 배열의 길이</a> </strong> </span>
</li><!--//item-->
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="list music aside section">
<div class="section-inner">
<h2 class="heading">인기 게시물</h2>
<div class="content">
<ul class="list"> <li><a href="/software-development-life-cycle">소프트웨어 개발 수명주기</a>
</li><li><a href="/random-function-c">C의 난수 생성기</a>
</li><li><a href="/string-array-java">문자열 자바 배열</a>
</li><li><a href="/how-split-strings-c">문자열 분할 C++</a>
</li><li><a href="/how-check-null-java">자바 널 체크</a>
</li><li><a href="/what-is-1-1000">1000.00개 중 1개</a>
</li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
</div><!--//secondary-->
</div><!--//row-->
</div><!--//masonry-->
<footer class="footer">
<div class="container text-center">
<span>
Copyright ©2025 판권 소유 | <a href="//ko.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">부인 성명</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">회사 소개</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">개인 정보 보호 정책</a> </span>
</div>
</footer>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
</body>
</html>