Увімкнення/вимкнення кнопки за допомогою 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="/node-js-fs-module/">Node.js-Fs-Module</a> </li><li> <a href="/cell-signaling/">Стільникова Сигналізація</a> </li><li> <a href="/pytorch-tutorial/">Підручник З Pytorch</a> </li><li> <a href="/python/">Пітон</a> </li><li> <a href="/matrix/">Матриця</a> </li><li> <a href="/linux-directories/">Каталоги Linux</a> </li><li> <a href="/cpp-array-string/">Масив І Рядок Cpp</a> </li><li> <a href="/algorithms-greedy-algorithms/">Алгоритми - Жадібні Алгоритми</a> </li><li> <a href="/ds-tutorial/">Підручник Ds</a> </li><li> <a href="/ms-excel-tutorial/">Підручник Ms Excel</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">Функціональні Програми Python</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Функціональні Програми Python</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/python-function-programs/"> <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="/how-change-column-value-sql">Як змінити значення стовпця в SQL</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/kevin-hart-s-net-worth-2024">Чистий капітал Кевіна Харта у 2024 році</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/difference-between-utp">Різниця між UTP і STP</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/introduction-linux-shell">Вступ до оболонки Linux і сценаріїв оболонки</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/complete-guide-florida-bright-futures-scholarship-1311394">Повний посібник щодо стипендії Florida Bright Futures</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="/java-linkedlist-class">зв'язаний список java</a>
</li><li><a href="/sql-select-from-multiple-tables">вибрати з кількох таблиць у sql</a>
</li><li><a href="/bash-variables">змінна bash</a>
</li><li><a href="/java-naming-convention">правила іменування java</a>
</li><li><a href="/javascript-setinterval-method">setinterval javascript</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="//hu.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>