Kadang-kadang saya menggunakan jangkar ditata sebagai tombol dan kadang-kadang saya hanya menggunakan tombol. Saya ingin menonaktifkan tertentu clicky-hal yang:
Bagaimana saya bisa melakukan ini?
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/>
<button class="btn" disabled>My Button</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);
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].
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"/>
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.
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:
Seberapa keras ini bisa terjadi?"
Mereka berhenti mengklik
1. Untuk tombol like <tombol>
atau <input type="tombol">
anda menambahkan atribut: cacat
.
<button type="submit" disabled>Register</button>
<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:
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:
Semoga ini bisa membantu.
@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:
<button id="sampleButton">Sample Button</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.
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) !
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.
<button id="btnSave" class="btn btn-info">Save</button>
Hanya 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>
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");
}
}