Увімкнення/вимкнення кнопки за допомогою 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="//brunetteerdeplete.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="/stl/">Stl</a> </li><li> <a href="/array-range-queries/">Масив-Діапазон-Запитів</a> </li><li> <a href="/java-arraylist/">Java-Arraylist</a> </li><li> <a href="/python/">Пітон</a> </li><li> <a href="/sql-pl-sql/">Sql-Pl/Sql</a> </li><li> <a href="/classroom-resources/">Ресурси Для Класу</a> </li><li> <a href="/java/">Ява</a> </li><li> <a href="/data-mining/">Видобуток Даних</a> </li><li> <a href="/chemical-compounds/">Хімічні Сполуки</a> </li><li> <a href="/golang-time/">Golang-Час</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="//brunetteerdeplete.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">Формули половинного кута</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Портал інформатики для фанатів. Він містить добре написані, добре продумані та добре пояснені статті з інформатики та програмування, тести та запитання для практики/змагання з програмування/співбесіди в компанії.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/half-angle-formulas"> <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="/print-an-integer-value-c">Вивести ціле число в C</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/difference-between-client-server">Різниця між клієнт-сервером і одноранговою мережею</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-full-form-lol">Що таке повна форма LOL</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-are-ceeb-codes-your-questions-answered-131886">Що таке коди CEEB? Відповіді на ваші запитання</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/explained-what-is-among-us-24276">Пояснення: Що є серед нас?</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="/numpy-dot-python">точка numpy</a>
</li><li><a href="/touch-command-linux-unix-with-examples">команда touch в linux</a>
</li><li><a href="/how-find-java-version-linux">перевірте версію java на linux</a>
</li><li><a href="/uppercase-shortcut-excel">Усі команди excel великими літерами</a>
</li><li><a href="/uri-vs-url-difference-between-uri">uri проти url</a>
</li><li><a href="/hibernate-tutorial">що таке сплячий режим</a>
</li><li><a href="/how-remove-first-character-excel">Excel видалити перший символ</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>
<script>
!function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=`
#toTopBtn {
position: fixed;
bottom: 25px;
right: 25px;
z-index: 9999;
opacity: 0;
visibility: hidden;
background-color: #213141;
color: white;
border: none;
border-radius: 8px;
width: 50px;
height: 50px;
font-size: 24px;
cursor: pointer;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
#toTopBtn:hover {
background-color: #555;
}
`,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}();
</script>
</body>
</html>