Bagaimana Mudah Lumpuhkan dan Dayakan Butang dan Pautan menggunakan jQuery dan Bootstrap?

Cara Melumpuhkan/Mendayakan Butang dan Pautan dengan Mudah dengan jQuery Bootstrap

Memahami Isu

Kadangkala, anda mungkin menghadapi situasi di mana anda ingin menghalang pengguna daripada berinteraksi dengan butang atau pautan tertentu. Ini melibatkan kedua-dua menunjukkan keadaan lumpuh mereka secara visual dan menghalang sebarang peristiwa klik.

Penyelesaian untuk Butang

Lumpuhkan butang dengan lancar dengan memanipulasi harta lumpuh mereka:

<input type="submit" class="btn" value="My Input Submit" disabled/>
<input type="button" class="btn" value="My Input Button" disabled/>
<button class="btn" disabled>My Button</button>

Untuk lumpuhkan jQuery tersuai fungsi:

jQuery.fn.extend({
    disable: function(state) {
        return this.each(function() {
            this.disabled = state;
        });
    }
});

Lumpuhkan: $('input[type="submit"], input[type="button"], button').disable(true);
Dayakan: $( 'input[type="submit"], input[type="button"], button').disable(false);

Penyelesaian untuk Teg Sauh (Pautan)

Teg anchor tidak mempunyai sifat yang dilumpuhkan, tetapi Bootstrap mengendalikannya dengan penggayaan CSS. Selain itu, kami boleh memasukkan jQuery untuk menghalang pautan daripada berfungsi apabila dilumpuhkan:

.btn.disabled, .btn[disabled] {
    cursor: default;
    opacity: 0.65;
    color: #333;
    background-color: #E6E6E6;
}

<a href="http://example.com" class="btn">My Link</a>

$('body').on('click', 'a.disabled', function(event) {
    event.preventDefault();
});

Lumpuhkan: $('a').disable(true);
Dayakan: $( 'a').disable(false);

Digabungkan Penyelesaian

Menggabungkan pendekatan di atas, kami boleh melanjutkan fungsi nyahdaya untuk menyemak jenis elemen dan mengendalikan pelumpuhan sewajarnya:

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

Lumpuhkan semua: $('input, button, a ').disable(true);
Dayakan semua: $('input, button, a').disable(false);

Atas ialah kandungan terperinci Bagaimana Mudah Lumpuhkan dan Dayakan Butang dan Pautan menggunakan jQuery dan Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!