Увімкнення/вимкнення кнопки за допомогою jQuery передбачає зміну її функціональних можливостей для прийняття введених даних користувачем чи ні. Зазвичай це робиться шляхом маніпулювання властивістю або атрибутом «disabled» за допомогою методів jQuery, таких як «.prop()» або «.attr()».
Щоб увімкнути/вимкнути кнопку за допомогою jQuery, вам знадобиться базова структура HTML разом із JavaScript/jQuery. Нижче наведено просту структуру коду для початку
HTML Кнопка Enable/Disabletitle><script src= 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'>сценарій> голова> <body> <button id='myButton'>Натисніть Mebutton><script>$(document).ready(function(){ // Код jQuery для кнопки ввімкнення/вимкнення // Додайте свій код тут }); script> body> 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>.prop() у jQuery</span> <span>щоб увімкнути/вимкнути кнопку, необхідно встановити для її властивості «disabled» значення true або false, забезпечуючи ефективний контроль над її інтерактивністю на основі вимог програми та взаємодії користувача.</span></p> <p dir='ltr'> <b> <strong>приклад:</strong> </b> <span>У цьому прикладі ми використовуємо jQuery: перемикає властивість кнопки «disabled» у подіях клацання та подвійного клацання для плавної взаємодії користувача за допомогою методу .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'>оновити mebutton><div style='margin-top: 50px'> <button id='change'>натисніть mebutton> div><script>$('#change').on('click', function () { $('#update').prop( 'disabled', true ); }); $('#change').on( 'dblclick', function () { $('#update').prop( 'вимкнено', false ); } ); script> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Вихід:</strong> </b> </p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-comparable-interface">порівняльний список</a>
</blockquote> <img src='//techcodeview.com/img/blogathon-2021/17/how-enable-disable-button-using-jquery.webp' alt="JqueryToggle"><p>Метод .prop() Приклад результату</p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-hashmap">hashmap java</a>
</blockquote> <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'>Оновити Mebutton><div style='margin-top: 50px;'> <button id='change'>Натисніть Mebutton> div><script>$('#change').on('click', function () { $('#update').attr('вимкнено', 'вимкнено'); }); $('#change').on('dblclick', функція () { $('#оновлення').removeAttr('вимкнено'); }); script> body> 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="/maven-tutorial/">Підручник Maven</a> </li><li> <a href="/groovy-tutorial/">Підручник Groovy</a> </li><li> <a href="/sql-tutorial/">Підручник З Sql</a> </li><li> <a href="/http-response-status-codes/">Коди Стану Відповідей Http</a> </li><li> <a href="/json-tutorial/">Підручник Json</a> </li><li> <a href="/linux-commands/">Команди Linux</a> </li><li> <a href="/latex-tutorial/">Підручник З Латексу</a> </li><li> <a href="/python-os-path-module/">Python Os-Path-Module</a> </li><li> <a href="/python-searching-exercises/">Вправи З Пошуку Python</a> </li><li> <a href="/java-networking/">Мережа Java</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">Cpp-Шаблон</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Cpp-Шаблон</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/cpp-template/"> <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="/current-gk/">Поточний Гк</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/million-vs-billion-difference">Мільйон проти мільярда: різниця та значення</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/computer-network-tutorial">Підручник з комп’ютерних мереж</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/authentication-vs-authorization-difference-between-authentication">Автентифікація Vs. Авторизація | Різниця між автентифікацією та авторизацією</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/lil-baby-net-worth-2024">Чистий капітал Lil Baby 2024: дохід, прибутки та інвестиції</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="/lion-vs-tiger">відмінність тигра і лева</a>
</li><li><a href="/what-is-internet">що таке інтернет</a>
</li><li><a href="/how-sort-dictionary-python">словник сортування python</a>
</li><li><a href="/how-go-browser-settings">налаштування інтернет-браузера</a>
</li><li><a href="/how-access-icloud-photos-android">як отримати доступ до фотографій icloud</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="//ca.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>