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

Tombol

Tombol sederhana untuk menonaktifkan sebagai keluarga adalah tombol properti yang ditangani oleh browser:

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

Untuk menonaktifkan ini dengan jQuery kustom fungsi, anda'd hanya menggunakan fn.memperpanjang():

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

[JSFiddle tombol dinonaktifkan dan masukan demo][2].

Jika tidak, anda'a menggunakan jQuery's prop() metode:

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

Anchor Tag

It's dicatat bahwa cacat isn't valid properti untuk tag anchor. Untuk alasan ini, Bootstrap menggunakan styling berikut pada nya .btn unsur-unsur:

.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 [cacat] properti ditargetkan serta .keluarga kelas. The .keluarga kelas adalah apa yang dibutuhkan untuk membuat sebuah tag anchor muncul dinonaktifkan.

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

Tentu saja, ini tidak akan mencegah link dari berfungsi saat diklik. Link di atas akan membawa kita ke http://example.com. Untuk mencegah hal ini, kita dapat menambahkan sepotong sederhana dari kode jQuery untuk target anchor tag dengan keluarga kelas untuk memanggil acara.preventDefault():

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

Kita dapat beralih keluarga kelas 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);

[JSFiddle cacat link demo][8].

Gabungan

Kita kemudian dapat memperpanjang sebelumnya menonaktifkan fungsi yang dibuat di atas untuk memeriksa jenis elemen yang kita're mencoba untuk menonaktifkan menggunakan adalah(). Dengan cara ini kita dapat toggleClass() jika isn't an input atau tombol elemen, atau beralih cacat property jika itu adalah:

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

[Penuh dikombinasikan demo JSFiddle][10].

It's bernilai lebih lanjut mencatat bahwa fungsi di atas juga akan bekerja pada semua jenis masukan.

Saya dapat't pikir sederhana/cara yang lebih mudah! ;-)

Menggunakan tag Anchor (Link) :

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

Untuk mengaktifkan Anchor tag:

 $('#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 submit,

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

Menonaktifkan:

Untuk menonaktifkan tombol, misalnya tombol kirim, anda hanya perlu menambahkan disabled atribut seperti,

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

Setelah mengeksekusi baris di atas, anda submit tag html akan terlihat seperti ini:

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

Perhatikan 'keluarga' atribut telah ditambahkan.

Memungkinkan:

Untuk mengaktifkan tombol, seperti ketika anda memiliki beberapa teks ke dalam bidang teks. Anda akan perlu untuk menghapus menonaktifkan atribut untuk mengaktifkan tombol,

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

Sekarang kode di atas akan menghapus 'keluarga' atribut.

Aku tahu aku'm terlambat untuk partai, tapi untuk secara khusus menjawab dua pertanyaan:

"saya hanya ingin menonaktifkan tertentu clicky-hal sehingga:

• Mereka berhenti mengklik
• Mereka terlihat cacat

Seberapa keras ini bisa terjadi?"

Mereka berhenti mengklik

1.  Untuk tombol like <tombol> atau <input type="tombol"> anda menambahkan atribut: cacat.

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

2.  Untuk link, link... sebenarnya, setiap elemen HTML, anda dapat menggunakan CSS3 pointer events.

.selector { pointer-events:none; }

Browser mendukung untuk pointer peristiwa mengagumkan dengan hari ini's state of the art (5/12/14). Tapi biasanya kita harus mendukung browser lama di IE alam, sehingga IE10 dan di bawah ini TIDAK mendukung pointer events: http://caniuse.com/pointer-events. Jadi menggunakan salah satu JavaScript solusi yang disebutkan oleh orang lain di sini mungkin menjadi cara untuk pergi untuk browser lama.

Info lebih lanjut tentang peristiwa pointer:

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

Mereka terlihat disabled

Jelas ini sebuah CSS jawaban, sehingga:

1.  Untuk tombol like <tombol> atau <input type="tombol"> menggunakan [atribut] selector:

button[disabled] { ... }

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

--

Berikut ini's dasar demo dengan hal-hal yang saya sebutkan berikut ini: http://jsfiddle.net/bXm5B/4/

Semoga ini bisa membantu.

Jika, seperti saya, anda hanya ingin menonaktifkan tombol, don't lewatkan jawaban sederhana halus yang tersembunyi di ini thread lama:

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

@James Donnelly telah disediakan jawaban yang komprehensif yang bergantung pada perluasan jQuery dengan fungsi baru. Itu adalah ide bagus, jadi saya akan beradaptasi kode nya jadi ini bekerja dengan cara saya membutuhkannya.

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)

Penggunaan ****

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

Kode akan memproses elemen tunggal atau daftar elemen-elemen.

Tombol dan Masukan yang mendukung cacat property dan, jika diatur ke benar, mereka akan terlihat cacat (terima kasih untuk bootstrap) dan tidak akan terbakar ketika diklik.

Jangkar don't mendukung kenyamanan tamu jadi gantinya kita akan bergantung pada .keluarga kelas untuk membuat mereka terlihat cacat (terima kasih untuk bootstrap lagi) dan hook up default klik acara yang mencegah klik dengan mengembalikan false (tidak perlu untuk preventDefault lihat di sini).

Catatan: Anda tidak perlu untuk melepas kaitan peristiwa ini ketika re-memungkinkan jangkar. Hanya mengeluarkan .keluarga kelas melakukan trik.

Tentu saja, ini tidak membantu jika anda telah terpasang custom handler klik untuk link, sesuatu yang sangat umum ketika menggunakan bootstrap dan jQuery. Jadi untuk mengatasi hal ini kita akan tro menggunakan dinonaktifkan() ekstensi untuk menguji .keluarga kelas, seperti ini:

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

Saya berharap yang membantu menyederhanakan hal-hal sedikit.

Catatan yang ada's aneh masalah jika anda're menggunakan Bootstrap's JS tombol dan 'loading' negara. Saya don't tahu mengapa ini terjadi, tapi di sini's bagaimana untuk memperbaikinya.

Katakanlah anda memiliki sebuah tombol dan anda set ke negara loading:

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

Sekarang anda ingin membawanya keluar dari beban negara, tetapi juga menonaktifkan (misalnya tombol adalah tombol Simpan, memuat state ditunjukkan berkelanjutan validasi dan validasi gagal). Hal ini sepertinya wajar JS Bootstrap:

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

Sayangnya, yang akan me-reset tombol, tapi tidak menonaktifkannya. Rupanya, button() melakukan beberapa tertunda tugas. Jadi anda'll juga harus menunda anda menonaktifkan:

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

Sedikit mengganggu, tapi itu's pola I'm menggunakan banyak.

Jawaban dan kontribusi dari semua! Aku harus memperpanjang fungsi ini sedikit untuk memasukkan menonaktifkan pilih unsur-unsur:

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 semua!

Untuk perilaku semacam itu, saya selalu menggunakan jQueryUI tombol widget, saya gunakan untuk link dan tombol.

Mendefinisikan tag dalam HTML:

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

Menggunakan jQuery untuk menginisialisasi tombol:

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

Menggunakan tombol widget metode untuk menonaktifkan/mengaktifkan mereka:

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

Yang akan mengurus tombol dan perilaku kursor, tapi jika anda perlu untuk mendapatkan lebih dalam dan mengubah gaya tombol ketika dinonaktifkan kemudian menimpa berikut kelas CSS dalam halaman anda gaya CSS file.

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

Tapi ingat: orang-orang kelas CSS (jika berubah) akan mengubah gaya untuk widget lainnya juga.

Berikut telah bekerja untuk saya dengan sangat baik:

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

Ini adalah agak terlambat menjawab, namun saya stumbled atas pertanyaan ini sambil mencari cara untuk menonaktifkan metode bootrap tombol setelah mengklik mereka dan mungkin menambahkan efek yang bagus (f.e spinner). I've menemukan sebuah perpustakaan besar yang tidak tepat:

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

Anda hanya seperti yang diperlukan css dan js, tambahkan beberapa sifat untuk anda tombol dan mengaktifkan lada dengan javascript... Presto ! Tombol anda memiliki kehidupan baru (silakan cek demo untuk melihat betapa indah itu adalah) !

Ini di atas tidak bekerja karena kadang-kadang

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

sesuaikan dengan kode

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

Saya tahu jawaban saya terlambat, tapi IMO ini adalah cara termudah untuk beralih Tombol 'mengaktifkan' dan tombol 'menonaktifkan'

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

Katakanlah anda memiliki yang terlihat seperti ini yang saat ini memungkinkan.

Save

Hanya tambahkan ini:

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

dan anda akan mendapatkan ini yang akan menonaktifkan tombol

Save

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