Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Lumpuhkan dan Dayakan Butang dan Pautan Menggunakan jQuery dan Bootstrap?

Bagaimanakah Saya Boleh Lumpuhkan dan Dayakan Butang dan Pautan Menggunakan jQuery dan Bootstrap?

Susan Sarandon
Susan Sarandonasal
2024-12-12 22:14:14228semak imbas

How Can I Disable and Enable Buttons and Links Using jQuery and Bootstrap?

Melumpuhkan dan Mendayakan 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

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

Teg Sauh

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();
});

Pendekatan Gabungan

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn