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> <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> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br />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> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <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><!--//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="/java-inner-class/">자바 내부 클래스</a> </li><li> <a href="/python-numpy-random-sampling/">Python Numpy-임의 샘플링</a> </li><li> <a href="/logarithms/">로그</a> </li><li> <a href="/installation-mac/">Mac에 설치</a> </li><li> <a href="/java-scanner-class/">자바 스캐너 클래스</a> </li><li> <a href="/pytorch-tutorial/">파이토치 튜토리얼</a> </li><li> <a href="/node-js-tutorial/">Node.js 튜토리얼</a> </li><li> <a href="/java-misc/">자바 기타</a> </li><li> <a href="/ios-development/">Ios 개발</a> </li><li> <a href="/cell-biology/">세포생물학</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Testng 튜토리얼</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Testng 튜토리얼</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/testng-tutorial/"> <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="/what-is-low-level-design">로우 레벨 디자인(LLD)이란 무엇입니까 – 시스템 디자인 배우기</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/difference-between-big-o-vs-big-theta-vs-big-omega-notations">Big O와 Big Theta Θ와 Big Omega Ω 표기법의 차이점</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/pgp">PGP</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/sql-select-count">SQL 셀렉트 카운트</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/iterative-deepening-search">반복 심화 검색(IDS) 또는 반복 심화 깊이 우선 검색(IDDFS)</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="/difference-between-python">아나콘다 대 파이썬 뱀</a>
</li><li><a href="/sql-data-types">속편 데이터 유형</a>
</li><li><a href="/java-convert-int-string">int를 문자열로 변환하는 방법</a>
</li><li><a href="/java-convert-char-string">문자를 문자열로 자바</a>
</li><li><a href="/f-string-python">f-문자열 파이썬</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="//uk.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>