Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Lumpuhkan dan Dayakan Butang dan Pautan Menggunakan jQuery dan Bootstrap?
Kadangkala anda perlu menghalang butang atau pautan tertentu daripada diklik dan memberikannya penampilan yang dilumpuhkan. Begini cara untuk mencapainya menggunakan jQuery dan Bootstrap:
Butang dalam HTML mempunyai atribut "dilumpuhkan" terbina dalam, menjadikannya mudah untuk melumpuhkannya:
<button class="btn" disabled>Disabled Button</button>
Untuk melumpuhkan butang dengan fungsi jQuery tersuai, lanjutkan fungsinya dengan disable() kaedah:
jQuery.fn.extend({ disable: function(state) { return this.each(function() { this.disabled = state; }); } }); $('button').disable(true); // Disable buttons $('button').disable(false); // Enable buttons
Dilumpuhkan bukan atribut yang sah untuk teg sauh (). Sebaliknya, Bootstrap menggayakan elemen dengan kelas .btn.disabled untuk menjadikannya kelihatan dilumpuhkan.
<a href="#" class="btn disabled">Disabled Link</a>
Untuk menghalang pautan daripada berfungsi apabila dilumpuhkan, gunakan jQuery untuk memintas klik:
$('body').on('click', 'a.disabled', function(event) { event.preventDefault(); });
Anda boleh melanjutkan fungsi disable() untuk mengendalikan input, butang dan pautan:
jQuery.fn.extend({ disable: function(state) { return this.each(function() { var $this = $(this); if($this.is('input, button, textarea, select')) this.disabled = state; else $this.toggleClass('disabled', state); }); } });
Ini membolehkan anda melumpuhkan semua elemen boleh klik dengan satu baris kod:
$('input, button, a').disable(true); // Disable all clickable elements $('input, button, a').disable(false); // Enable all clickable elements
Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Lumpuhkan dan Dayakan Butang dan Pautan Menggunakan jQuery dan Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!