Wyłącz przycisk w jQuery

359

Moja strona tworzy wiele przycisków jako id = 'rbutton_"+i+"'. Poniżej mój kod:

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

W JavaScript

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

Ale nie wyłącza mojego przycisku po kliknięciu.

użytkownik2047817
źródło
6
„rbutton _” + i + ”” nie jest prawidłowym identyfikatorem.
Diodeusz - James MacFarlane
Jak mogę określić identyfikator. Tworzy się w moim javascript w pętli for.
user2047817
Co powiesz na utworzenie jsFiddle, abyśmy mogli zobaczyć, co robisz?
j08691
5
Prawdopodobnie chcesz disable(this)ifunction disable(elem) { $(elem).attr("disabled","disabled") }
JJJ
2
jQuery może adresować elementy za pomocą ich numeru indeksu, więc jeśli zrobisz to dobrze, możesz nawet nie potrzebować identyfikatorów. Możesz przekazać disable (this) jako samodzielne odniesienie.
Diodeusz - James MacFarlane

Odpowiedzi:

638

.propZamiast tego użyj (i wyczyść ciąg selektora):

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

wygenerowany HTML:

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

Ale podejście „najlepszych praktyk” polega na użyciu powiązania zdarzeń JavaScript i thiszamiast tego:

$('.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/

Blazemonger
źródło
Oto małe skrzypce, które stworzyłem. Proszę, pozwól mi, co robię źle. jsfiddle.net/2Nfu4/3
user2047817
OK. Działa w No Wrap - w Head .. Ale czy mogę zapytać dlaczego? Być może jest to coś podobnego, nie robię tego w moim rzeczywistym kodzie !!
user2047817
Wygląda na to, że jsFiddle ma taką konfigurację - możesz „sprawdzić element” w przeglądarce, jeśli chcesz dokładnie przeanalizować, co się dzieje.
Blazemonger
1
To działa dobrze. Tylko upewnij się, że jeśli używasz ajax, włączasz przycisk w przypadkach powodzenia i błędów. Nie do końca wywołania ajax. Ponieważ wtedy zostanie natychmiast włączony, a w ogóle nie zobaczysz wyłączenia.
user890332,
Z jQuery 1.10.2 działa w IE 11, ale nie w wersji Chrome 39.0.2171.95 m. Podejrzanie, skrzypce użyte w tej odpowiedzi nie oferują jQuery 1.10.2
Alex
35

Wypróbuj ten kod:
HTML

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

funkcjonować

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

Inne rozwiązanie z jquery

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

PRÓBNY


Inne rozwiązanie z czystym javascript

<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

Alessandro Minoccheri
źródło
Druga funkcja .click () działa idealnie w twojej wersji demonstracyjnej. Ale muszę użyć oddzielnej metody, jak wspomniano w pierwszym rozwiązaniu, ale to nie działa. Czy możesz mi pomóc !!
user2047817
Dodano trzecie rozwiązanie z czystym javascript @ user2047817
Alessandro Minoccheri
29

Są tutaj dwie rzeczy, a najwyższa głosowana odpowiedź jest technicznie poprawna, jak na pytanie PO.

Krótko podsumowane jako:

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

Jednakże, jeśli używasz interfejsu jQuery (wiem, że OP nie był, ale niektórzy mogą tu przybyć), to chociaż spowoduje to wyłączenie kliknięcia przycisków, nie sprawi, że przycisk będzie wyglądał na wyłączony zgodnie ze stylem interfejsu użytkownika.

Jeśli używasz przycisku w stylu interfejsu użytkownika jQuery, należy go włączyć / wyłączyć poprzez:

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

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

Morvael
źródło
27

To moim zdaniem najprostszy sposób:

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

Lucas
źródło
1
Bardzo fajny pan. To całkowicie działało. Nawet z przyciskami bootstrap.
steve moretz,
25

Spróbuj tego

function disable(i){
    $("#rbutton_"+i).attr("disabled",true);
}
MaryAnn
źródło
15

przycisk wyłączania:

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

przycisk włączania:

$('#button_id').removeAttr('disabled');
Cris
źródło
13

Po prostu działa dobrze, w HTML:

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

Po stronie JQuery umieść tę funkcję dla przycisku wyłączania:

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

Aby włączyć przycisk:

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

To wszystko.

George Pradeep
źródło
3

Oto jak to zrobić za pomocą ajax.

$("#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
użytkownik890332
źródło
w niektórych wersjach jQuery musisz użyć .attr('disabled', true). Nie wiem, która z nich, ale wersja, z której muszę korzystać (zminimalizowana i dołączona jako część aplikacji, nad którą pracuję) rzuca się w object does not support prop
oczy
2

To działa dla mnie:

<script type="text/javascript">
function change(){
    document.getElementById("submit").disabled = false;
}
</script>
Javi Ps
źródło
2

Chcę wyłączyć przycisk pod pewnymi warunkami, używam 1. rozwiązania, ale to nie działa dla mnie. Ale kiedy używam drugiego, zadziałało. Poniżej są wyniki z konsoli przeglądarki.

1. $ („# psl2 .btn-Continue”). Prop („wyłączony”, prawda)

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

2. $ („# psl2 .btn-Continue”). Attr („wyłączone”, „wyłączone”)

<a class=​"btn btn-yellow btn-continue" href=​"#" disabled=​"disabled">​Next​</a>
Pooja Mane
źródło
0

W przypadku przycisków interfejsu użytkownika Jquery działa to:

$("#buttonId").button( "option", "disabled", true | false );
Khrys znany również jako Louis
źródło