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.