Desativar botão no jQuery

359

Minha página cria vários botões como id = 'rbutton_"+i+"'. Abaixo está o meu código:

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

Em Javascript

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

Mas ele não desativa meu botão quando clico nele.

user2047817
fonte
6
'rbutton _ "+ i +"' não é um ID válido.
Diodeus - James MacFarlane
Como posso especificar o ID. Está sendo criado no meu javascript dentro de um loop for.
user2047817
Que tal criar um jsFiddle para que possamos ver o que você está fazendo?
J08691
5
Você provavelmente quer disable(this)efunction disable(elem) { $(elem).attr("disabled","disabled") }
JJJ 27/02
2
O jQuery pode endereçar elementos usando seu número de índice; portanto, se você fizer isso corretamente, talvez nem precise de IDs. Você pode passar desativar (isso) como uma auto-referência.
Diodeus - James MacFarlane

Respostas:

638

Use em .propvez disso (e limpe sua sequência de seleção):

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

HTML gerado:

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

Mas a abordagem "melhores práticas" é usar a associação de eventos JavaScript e, em thisvez disso:

$('.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
fonte
Aqui está um pequeno violino que eu criei. Por favor, deixe-me o que estou fazendo de errado. jsfiddle.net/2Nfu4/3
user2047817
ESTÁ BEM. Funcionou em No Wrap - in Head .. Mas posso perguntar por quê? Pode ser que isso seja algo semelhante, não estou fazendo isso no meu código real !!
user2047817
Do jeito que o jsFiddle o configurou, parece - você pode "inspecionar o elemento" no seu navegador se quiser analisar exatamente o que está acontecendo.
Blazemonger
11
Isso funciona bem. Apenas certifique-se de que, se você estiver usando ajax, ative o botão nos casos de sucesso e erro. Não no final da chamada ajax. Porque então ele será ativado imediatamente e você não verá a desativação.
user890332
Com o jQuery 1.10.2, ele funciona no IE 11, mas não na versão 39.0.2171.95 m do Chrome. Suspeita, o violino usado para esta resposta não oferece jQuery 1.10.2
Alex
35

Experimente este código:
HTML

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

função

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

Outra solução com jquery

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

DEMO


Outra solução com javascript puro

<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
fonte
A segunda função .click () funciona perfeitamente em sua demonstração. Mas eu tenho que usar o método separado, como mencionado na sua primeira solução, mas não funciona. Você pode por favor ajudar!!
user2047817
Adicionada uma terceira solução com javascript puro @ user2047817
Alessandro Minoccheri
29

Há duas coisas aqui, e a resposta mais votada é tecnicamente correta, de acordo com a pergunta dos POs.

Resumidamente resumido como:

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

No entanto, você deve usar a interface do usuário do jQuery (eu sei que o OP não estava, mas algumas pessoas que chegam aqui podem estar); enquanto isso desativará o evento de clique nos botões, ele não fará com que o botão apareça desativado de acordo com o estilo da interface do usuário.

Se você estiver usando um botão denominado UI do jQuery, ele deverá ser ativado / desativado via:

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

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

Morvael
fonte
27

Esta é a maneira mais simples na minha opinião:

// 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
fonte
11
Muito bom senhor. Este totalmente funcionou. Até com botões de inicialização.
steve moretz 10/09/19
25

Tente isto

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

botão desativar:

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

botão de habilitação:

$('#button_id').removeAttr('disabled');
Cris
fonte
13

Simplesmente funciona bem, em HTML:

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

No lado do JQuery, coloque esta função para o botão desativar:

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

Para o botão ativar:

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

Isso é tudo.

George Pradeep
fonte
3

Aqui está como você faz isso com 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
user890332
fonte
em algumas versões do jQuery, você deve usar .attr('disabled', true). Eu não sei o que, mas a versão que eu estou tendo que usar (minified e empacotado como parte do aplicativo que estou trabalhando) joga comobject does not support prop
JoeBrockhaus
2

Isso funciona para mim:

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

Eu quero desativar o botão em alguma condição, estou usando a 1ª solução, mas não funcionará para mim. Mas quando eu uso o segundo, ele funcionou. Abaixo estão as saídas do console do navegador.

1. $ ('# psl2 .btn-continue'). Prop ("desativado", verdadeiro)

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

2. $ ('# psl2 .btn-continue'). Attr ("desativado", "desativado")

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

Para os botões da interface do usuário do Jquery, isso funciona:

$("#buttonId").button( "option", "disabled", true | false );
Khrys tcp Louis
fonte