Apa cara termudah untuk menonaktifkan / mengaktifkan tombol dan tautan (jQuery + Bootstrap)

Terkadang saya menggunakan jangkar yang ditata sebagai tombol dan terkadang saya hanya menggunakan tombol. Saya ingin menonaktifkan hal-hal tertentu untuk:

• Mereka terlihat dinonaktifkan
• Mereka berhenti diklik

Bagaimana saya bisa melakukan ini?

Tombol

Tombol- disabledtombolnya mudah dinonaktifkan karena merupakan properti tombol yang ditangani oleh browser:

<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 menonaktifkannya dengan fungsi jQuery khusus, Anda cukup menggunakan fn.extend():

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

// Disabled with:
$('input[type="submit"], input[type="button"], button').disable(true);

// Enabled with:
$('input[type="submit"], input[type="button"], button').disable(false);

Tombol JSFiddle dinonaktifkan dan input demo .

Kalau tidak, Anda akan menggunakan prop()metode jQuery :

$('button').prop('disabled', true);
$('button').prop('disabled', false);

Tag Jangkar

Perlu dicatat bahwa disabledini bukan properti yang valid untuk tag anchor. Karena alasan ini, Bootstrap menggunakan gaya berikut pada .btnelemen - elemennya:

.btn.disabled, .btn[disabled] {
    cursor: default;
    background-image: none;
    opacity: 0.65;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    color: #333;
    background-color: #E6E6E6;
}

Perhatikan bagaimana [disabled]properti ditargetkan serta .disabledkelas. The .disabledkelas adalah apa yang dibutuhkan untuk membuat tag anchor muncul dinonaktifkan.

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

Tentu saja, ini tidak akan mencegah tautan berfungsi saat diklik. Tautan di atas akan membawa kita ke http://example.com . Untuk mencegah hal ini, kita dapat menambahkan sepotong kode jQuery sederhana ke tag anchor target dengan disabledkelas untuk memanggil event.preventDefault():

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

Kita dapat beralih disabledkelas dengan menggunakan toggleClass():

jQuery.fn.extend({
    disable: function(state) {
        return this.each(function() {
            var $this = $(this);
            $this.toggleClass('disabled', state);
        });
    }
});

// Disabled with:
$('a').disable(true);

// Enabled with:
$('a').disable(false);

Demo tautan JSFiddle dinonaktifkan .

Gabungan

Kami kemudian dapat memperluas fungsi menonaktifkan sebelumnya yang dibuat di atas untuk memeriksa jenis elemen yang kami coba nonaktifkan gunakan is(). Dengan cara ini kita dapat toggleClass()jika itu bukan elemen inputatau buttonelemen, atau beralih disabledproperti jika:

// Extended disable function
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);
        });
    }
});

// Disabled on all:
$('input, button, a').disable(true);

// Enabled on all:
$('input, button, a').disable(false);

Demo JSFiddle gabungan lengkap .

Perlu dicatat lebih lanjut bahwa fungsi di atas juga akan berfungsi pada semua tipe input.

Saya tidak bisa memikirkan cara yang lebih sederhana / lebih mudah! ;-)

Menggunakan Tag Anchor (Tautan):

<a href="#delete-modal" class="btn btn-danger" id="delete">Delete</a>

Untuk mengaktifkan tag Anchor:

 $('#delete').removeClass('disabled');
 $('#delete').attr("data-toggle", "modal");

Untuk menonaktifkan tag Anchor:

 $('#delete').addClass('disabled');
 $('#delete').removeAttr('data-toggle');

Misalkan Anda memiliki bidang teks dan tombol kirim,

<input type="text" id="text-field" />
<input type="submit" class="btn" value="Submit"/>

Menonaktifkan:

Untuk menonaktifkan tombol apa saja, misalnya, kirimkan tombol Anda hanya perlu menambahkan atribut yang dinonaktifkan sebagai,

$('input[type="submit"]').attr('disabled','disabled');

Setelah menjalankan baris di atas, tag html tombol kirim Anda akan terlihat seperti ini:

<input type="submit" class="btn" value="Submit" disabled/>

Perhatikan bahwa atribut 'dinonaktifkan' telah ditambahkan .

Mengaktifkan:

Untuk mengaktifkan tombol, seperti ketika Anda memiliki beberapa teks di bidang teks. Anda harus menghapus atribut disable untuk mengaktifkan tombol sebagai,

 if ($('#text-field').val() != '') {
     $('input[type="submit"]').removeAttr('disabled');
 }

Sekarang kode di atas akan menghapus atribut 'dinonaktifkan'.

Saya tahu saya terlambat ke pesta, tetapi secara khusus menjawab dua pertanyaan:

"Saya hanya ingin menonaktifkan hal-hal tertentu untuk:

• Mereka berhenti mengklik
• Mereka terlihat dinonaktifkan

Seberapa keras ini bisa terjadi? "

Mereka berhenti mengklik

1. Untuk tombol suka <button>atau <input type="button">Anda tambahkan atribut: disabled.

<button type="submit" disabled>Register</button>
<input type="button" value="Register" disabled>

2. Untuk tautan, tautan APA PUN ... sebenarnya, elemen HTML apa pun, Anda dapat menggunakan peristiwa pointer CSS3 .

.selector { pointer-events:none; }

Dukungan browser untuk acara pointer sangat luar biasa menurut perkembangan terkini (5/12/14). Tapi kami biasanya harus mendukung browser lawas di ranah IE, jadi IE10 dan di bawah JANGAN mendukung acara pointer: http://caniuse.com/pointer-events . Jadi menggunakan salah satu solusi JavaScript yang disebutkan oleh orang lain di sini mungkin merupakan cara untuk menggunakan browser lawas.

Info lebih lanjut tentang acara pointer:

• https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
• http://wiki.csswg.org/spec/css4-ui#pointer-events

Mereka terlihat dinonaktifkan

Jelas ini jawaban CSS, jadi:

1. Untuk tombol suka <button>atau <input type="button">gunakan [attribute]pemilih:

button[disabled] { ... }

input[type=button][disabled] { ... }

-

Berikut ini adalah demo dasar dengan hal-hal yang saya sebutkan di sini: http://jsfiddle.net/bXm5B/4/

Semoga ini membantu.

Jika, seperti saya, Anda hanya ingin menonaktifkan tombol, jangan lewatkan jawaban sederhana yang tersembunyi di utas panjang ini:

 $("#button").prop('disabled', true);

@ James Donnelly telah memberikan jawaban komprehensif yang bergantung pada perluasan jQuery dengan fungsi baru. Itu ide yang bagus, jadi saya akan mengadaptasi kodenya sehingga berfungsi seperti yang saya inginkan.

Memperluas jQuery

$.fn.disable=-> setState $(@), true
$.fn.enable =-> setState $(@), false
$.fn.isDisabled =-> $(@).hasClass 'disabled'

setState=($el, state) ->
    $el.each ->
        $(@).prop('disabled', state) if $(@).is 'button, input'
        if state then $(@).addClass('disabled') else $(@).removeClass('disabled')

    $('body').on('click', 'a.disabled', -> false)

Pemakaian

$('.btn-stateful').disable()
$('#my-anchor').enable()

Kode akan memproses elemen tunggal atau daftar elemen.

Tombol dan Input mendukung disabledproperti dan, jika diatur ke true, mereka akan terlihat dinonaktifkan (terima kasih untuk bootstrap) dan tidak akan menyala ketika diklik.

Jangkar tidak mendukung properti yang dinonaktifkan jadi alih-alih kami akan bergantung pada .disabledkelas untuk membuat mereka terlihat dinonaktifkan (terima kasih untuk bootstrap lagi) dan menghubungkan acara klik default yang mencegah klik dengan mengembalikan false (tidak perlu untuk preventDefaultmelihat di sini ) .

Catatan : Anda tidak perlu melepas kaitan acara ini saat mengaktifkan kembali jangkar. Cukup dengan menghapus .disabledkelas, lakukan triknya.

Tentu saja, ini tidak membantu jika Anda telah melampirkan handler klik kustom ke tautan, sesuatu yang sangat umum saat menggunakan bootstrap dan jQuery. Jadi untuk mengatasi ini kita akan menggunakan isDisabled()ekstensi untuk menguji .disabledkelas, seperti ini:

$('#my-anchor').click -> 
    return false if $(@).isDisabled()
    # do something useful

Saya harap itu membantu menyederhanakan banyak hal.

Perhatikan bahwa ada masalah aneh jika Anda menggunakan tombol JS Bootstrap dan status 'memuat'. Saya tidak tahu mengapa ini terjadi, tetapi inilah cara memperbaikinya.

Katakanlah Anda memiliki tombol dan Anda mengaturnya ke status memuat:

var myButton = $('#myBootstrapButton');
myButton.button('loading');

Sekarang Anda ingin mengeluarkannya dari status pemuatan, tetapi juga menonaktifkannya (mis. Tombolnya adalah tombol Simpan, status pemuatan menunjukkan validasi yang sedang berlangsung dan validasi gagal). Ini terlihat seperti Bootstrap JS yang masuk akal:

myButton.button('reset').prop('disabled', true); // DOES NOT WORK

Sayangnya, itu akan mengatur ulang tombol, tetapi tidak menonaktifkannya. Rupanya, button()melakukan beberapa tugas yang tertunda. Jadi, Anda juga harus menunda penonaktifan Anda:

myButton.button('reset');
setTimeout(function() { myButton.prop('disabled', true); }, 0);

Agak menyebalkan, tapi itu pola yang sering saya gunakan.

Jawaban dan kontribusi luar biasa dari semua! Saya harus sedikit memperluas fungsi ini untuk menyertakan penonaktifan elemen terpilih:

jQuery.fn.extend({
disable: function (state) {
    return this.each(function () {
        var $this = jQuery(this);
        if ($this.is('input, button'))
            this.disabled = state;
        else if ($this.is('select') && state)
            $this.attr('disabled', 'disabled');
        else if ($this.is('select') && !state)
            $this.removeAttr('disabled');
        else
            $this.toggleClass('disabled', state);
    });
}});

Tampaknya bekerja untuk saya. Terima kasih semuanya!

Untuk perilaku semacam itu saya selalu menggunakan buttonwidget jQueryUI , saya menggunakannya untuk tautan dan tombol.

Tetapkan tag dalam HTML:

<button id="sampleButton">Sample Button</button>
<a id="linkButton" href="yourHttpReferenceHere">Link Button</a>

Gunakan jQuery untuk menginisialisasi tombol:

$("#sampleButton").button();
$("#linkButton").button();

Gunakan buttonmetode widget untuk menonaktifkan / mengaktifkannya:

$("#sampleButton").button("enable"); //enable the button
$("#linkButton").button("disable"); //disable the button

Itu akan menangani tombol dan perilaku kursor, tetapi jika Anda perlu lebih dalam dan mengubah gaya tombol saat dinonaktifkan maka timpa kelas CSS berikut dalam file gaya CSS halaman Anda.

.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
      background-color:aqua;
      color:black;
 }

Tapi ingat: kelas-kelas CSS (jika diubah) akan mengubah gaya untuk widget lain juga.

Berikut ini telah bekerja dengan baik untuk saya:

$("#button").attr('disabled', 'disabled');

Ini adalah jawaban yang agak terlambat, namun saya menemukan pertanyaan ini sambil mencari cara untuk menonaktifkan tombol boostrap setelah mengkliknya dan mungkin menambahkan efek yang bagus (fe a spinner). Saya telah menemukan perpustakaan hebat yang melakukan hal itu:

http://msurguy.github.io/ladda-bootstrap/

Anda cukup memasukkan css dan js yang diperlukan, tambahkan beberapa properti ke tombol Anda dan aktifkan lada dengan javascript ... Presto! Tombol Anda memiliki kehidupan baru (silakan periksa demo untuk melihat betapa indahnya itu)!

Ini di atas tidak berfungsi karena kadang-kadang

$(this).attr('checked') == undefined

sesuaikan kode Anda dengan

if(!$(this).attr('checked') || $(this).attr('checked') == false){

Saya tahu jawaban saya terlambat, tetapi IMO ini adalah cara termudah untuk mengganti Tombol 'aktifkan' dan tombol 'nonaktifkan'

function toggleButtonState(button){

  //If button is enabled, -> Disable
  if (button.disabled === false) {
    button.disabled = true;

  //If button is disabled, -> Enable
  } else if (button.disabled === true) {
    button.disabled = false;
  }
}

Misalkan Anda memiliki tombol-tombol ini pada halaman seperti:

<input type="submit" class="byBtn" disabled="disabled" value="Change"/>
<input type="submit" class="byBtn" disabled="disabled" value="Change"/>
<input type="submit" class="byBtn" disabled="disabled" value="Change"/>
<input type="submit" class="byBtn" disabled="disabled" value="Change"/>
<input type="submit" class="byBtn" disabled="disabled" value="Change"/>
<input type="submit"value="Enable All" onclick="change()"/>

Kode js:

function change(){
   var toenable = document.querySelectorAll(".byBtn");        
    for (var k in toenable){
         toenable[k].removeAttribute("disabled");
    }
}

Katakanlah Anda memiliki yang terlihat seperti ini yang saat ini diaktifkan.

<button id="btnSave" class="btn btn-info">Save</button>

Cukup tambahkan ini:

$("#btnSave").prop('disabled', true);

dan Anda akan mendapatkan ini yang akan menonaktifkan tombol

<button id="btnSave" class="btn btn-primary" disabled>Save</button>

Jika Anda ingin menonaktifkan yang dapat diklik, Anda juga dapat menambahkan inline ini dalam html

style="cursor: not-allowed;"