Увімкнення/вимкнення кнопки за допомогою 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> <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> <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'>оновити 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> <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'>Оновити 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><!--//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="/arrays/">Масиви</a> </li><li> <a href="/misc/">Різний</a> </li><li> <a href="/c-list-function/">Функція Списку C++</a> </li><li> <a href="/unity-tutorial/">Підручник Unity</a> </li><li> <a href="/prime-number/">Просте Число</a> </li><li> <a href="/dot-net/">Dot-Net</a> </li><li> <a href="/top-10-list-world/">Топ-10 Списку - Світ</a> </li><li> <a href="/red-black-tree/">Червоне Чорне Дерево</a> </li><li> <a href="/english-grammar/">Граматика Англійської Мови</a> </li><li> <a href="/java-serialization/">Серіалізація Java</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Чистий капітал Каньє Веста 2023: зарплата, біографія, активи</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Відкрийте для себе чистий капітал Каньє Веста, який оцінюється приблизно в 500 мільйонів доларів. Дослідіть його успішну кар'єру, фінансові досягнення та розкішні колекції.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/kanye-west-net-worth-2023"> <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="/program-convert-cm-feet">Програма для перетворення сантиметрів у фути та дюйми</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/8-big-differences-between-colleges-1311426">8 великих відмінностей між коледжами та університетами</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/english-word-play/">Англійська Гра Слів</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/10-best-code-text-editors">10 найкращих редакторів коду/тексту для Mac для завантаження у 2024 році</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/rakhi-sawant">Рахі Савант</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="/bash-check-if-variable-is-set">bash перевіряє, чи встановлено змінну середовища</a>
</li><li><a href="/collections-java">java колекції java</a>
</li><li><a href="/java-math-exp-method">'число Ейлера в java'</a>
</li><li><a href="/list-mission-impossible-movies">скільки там фільмів місія неможлива</a>
</li><li><a href="/bfs-algorithm">алгоритм для bfs</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="//nl.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>