Bagaimanakah Saya Boleh Lumpuhkan dan Dayakan Butang dan Pautan Menggunakan jQuery dan 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!