JQuery'de devre dışı bırak düğmesi


359

Sayfam olarak birden çok düğme oluşturur id = 'rbutton_"+i+"'. Kodum aşağıdadır:

<button type='button' id = 'rbutton_"+i+"' onclick=disable(i);>Click me</button>

Javascript'te

function disable(i){
    $("#rbutton'+i+'").attr("disabled","disabled");
}

Ama tıkladığımda düğmemi devre dışı bırakmıyor.


6
'rbutton _ "+ i +"' geçerli bir kimlik değil.
Diodeus - James MacFarlane

Kimliği nasıl belirtebilirim? Javascript içinde bir for döngüsü içinde oluşturuluyor.
user2047817

Ne yaptığınızı görebilmemiz için bir jsFiddle oluşturmaya ne dersiniz?
j08691

5
Muhtemelen istiyorsunuz disable(this)vefunction disable(elem) { $(elem).attr("disabled","disabled") }
JJJ

2
jQuery öğeleri dizin numaralarını kullanarak adresleyebilir, bu yüzden doğru yaparsanız kimliklere bile ihtiyacınız olmayabilir. Devre dışı bırakma (bu) öğesini bir referans olarak geçebilirsiniz.
Diodeus - James MacFarlane

Yanıtlar:


638

.propBunun yerine kullanın (ve seçici dizenizi temizleyin):

function disable(i){
    $("#rbutton_"+i).prop("disabled",true);
}

oluşturulan HTML:

<button id="rbutton_1" onclick="disable(1)">Click me</button>
<!-- wrap your onclick in quotes -->

Ancak "en iyi uygulamalar" yaklaşımı, JavaScript etkinlik bağlayıcısını kullanmaktır ve thisbunun yerine:

$('.rbutton').on('click',function() {
    $(this).prop("disabled",true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="rbutton">Click me</button>

http://jsfiddle.net/mblase75/2Nfu4/


İşte yarattığım küçük bir keman. Lütfen yanlış yaptığım şeyi bana bildirin. jsfiddle.net/2Nfu4/3
user2047817

TAMAM. No Wrap'da çalıştı - Head.Ama neden sorabilir miyim? Bu benzer bir şey olabilir, bunu gerçek kodumda yapmıyorum !!
user2047817

Tam olarak ne olduğunu analiz etmek istiyorsanız, jsFiddle'ın kurduğu şekilde, tarayıcınızdaki "elemanı inceleyebilirsiniz".
Blazemonger

1
Bu iyi çalışıyor. Ajax kullanıyorsanız, düğmeyi başarı ve hata durumlarında etkinleştirdiğinizden emin olun. Ajax çağrısının sonunda değil. Çünkü o zaman hemen etkinleştirilecek ve devre dışı bırakmayı hiç görmeyeceksiniz.
user890332

JQuery 1.10.2 ile IE 11'de çalışır, ancak Chrome Sürüm 39.0.2171.95 m'de çalışmaz. Şüphesiz, bu cevap için kullanılan keman jQuery 1.10.2 sunmuyor
Alex

35

Bu kodu deneyin:
HTML

<button type='button' id = 'rbutton_'+i onclick="disable(i)">Click me</button>

fonksiyon

function disable(i){
    $("#rbutton_"+i).attr("disabled","disabled");
}

JQuery ile diğer çözüm

$('button').click(function(){ 
    $(this).attr("disabled","disabled");
});

DEMO


Saf javascript ile diğer çözüm

<button type='button' id = 'rbutton_1' onclick="disable(1)">Click me</button>

<script>
function disable(i){
 document.getElementById("rbutton_"+i).setAttribute("disabled","disabled");
}
</script>

demo2 dosyası


İkinci .click () işlevi demonuzda mükemmel çalışır. Ama ilk çözümünüzde belirtildiği gibi ayrı bir yöntem kullanmalıyım ama işe yaramıyor. Lütfen yardım edebilir misin!!
user2047817

Saf javascript ile üçüncü bir çözüm eklendi @ user2047817
Alessandro Minoccheri

29

Burada iki şey var ve en yüksek oyu alan cevap OP sorusuna göre teknik olarak doğru.

Kısaca şöyle özetlenmiştir:

$("some sort of selector").prop("disabled", true | false);

Ancak jQuery UI kullanıyor olmanız gerekir (OP olmadığını biliyorum ama buraya gelen bazı insanlar olabilir) o zaman bu düğmeler click olayı devre dışı bırakacak iken düğmenin UI stiline göre devre dışı görünmesini sağlamayacaktır.

Bir jQuery UI tarz düğmesi kullanıyorsanız şu yöntemle etkinleştirilmeli / devre dışı bırakılmalıdır:

$("some sort of selector").button("enable" | "disable");

http://api.jqueryui.com/button/#method-disable


27

Bence bu en basit yol:

// All buttons where id contains 'rbutton_'
const $buttons = $("button[id*='rbutton_']");

//Selected button onclick
$buttons.click(function() {
    $(this).prop('disabled', true); //disable clicked button
});

//Enable button onclick
$('#enable').click(() =>
    $buttons.prop('disabled', false) //enable all buttons
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="rbutton_200">click</button>
<button id="rbutton_201">click</button>
<button id="rbutton_202">click</button>
<button id="rbutton_203">click</button>
<button id="rbutton_204">click</button>
<button id="rbutton_205">click</button>
<button id="enable">enable</button>


1
Çok güzel efendim.Bu tamamen çalıştı. Bootstrap düğmeleriyle bile.
steve moretz

25

Bunu dene

function disable(i){
    $("#rbutton_"+i).attr("disabled",true);
}

15

devre dışı bırak düğmesi:

$('#button_id').attr('disabled','disabled');

etkinleştirme düğmesi:

$('#button_id').removeAttr('disabled');

13

HTML'de sorunsuz çalışır:

<button type="button" id="btn_CommitAll"class="btn_CommitAll">save</button>

JQuery tarafında devre dışı bırakma düğmesi için bu işlevi koyun:

function disableButton() {
    $('.btn_CommitAll').prop("disabled", true);
}

Etkinleştirme düğmesi için:

function enableButton() {
    $('.btn_CommitAll').prop("disabled", false);
}

Bu kadar.


3

Ajax ile bunu nasıl yapacağınız aşağıda açıklanmıştır.

$("#updatebtn").click(function () {
    $("#updatebtn").prop("disabled", true);
    urlToHandler = 'update.ashx';
            jsonData = data;
            $.ajax({
                url: urlToHandler,
                data: jsonData,
                dataType: 'json',
                type: 'POST',
                contentType: 'application/json',
                success: function (data) {
                    $("#lbl").html(data.response);
                    $("#updatebtn").prop("disabled", false);
                    //setAutocompleteData(data.response);
                },
                error: function (data, status, jqXHR) {
                    alert('There was an error.');
                    $("#updatebtn").prop("disabled", false);
                }
            }); // end $.ajax

jQuery'nin bazı sürümlerinde kullanmanız gerekir .attr('disabled', true). Hangisini bilmiyorum, ama kullanmak zorunda olduğum sürüm (üzerinde çalıştığım uygulamanın bir parçası olarak küçültülmüş ve paketlenmiş) object does not support prop
atılıyor

2

Bu benim için çalışıyor:

<script type="text/javascript">
function change(){
    document.getElementById("submit").disabled = false;
}
</script>

2

Bazı durumlarda düğmeyi devre dışı bırakmak istiyorum, 1. çözümü kullanıyorum ama benim için çalışmaz. Ama 2. birini kullandığımda işe yaradı.Aşağıda tarayıcı konsolundan çıktılar var.

1. $ ('# psl2 .btn-continue'). Prop ("devre dışı", doğru)

<a class=​"btn btn-yellow btn-continue" href=​"#">​Next​</a>

2. $ ('# psl2 .btn-continue'). Attr ("devre dışı", "devre dışı")

<a class=​"btn btn-yellow btn-continue" href=​"#" disabled=​"disabled">​Next​</a>

0

Jquery UI düğmeleri için bu çalışır:

$("#buttonId").button( "option", "disabled", true | false );
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.