Deshabilitar el botón en jQuery

Mi página crea múltiples botones como id = 'rbutton_"+i+"' . A continuación está mi código:

  

En Javascript

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

Pero no desactiva mi botón cuando hago clic en él.

Use .prop en .prop lugar (y limpie su cadena de selector):

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

HTML generado:

   

Pero el enfoque de “mejores prácticas” es usar el enlace de eventos JavaScript y this en this lugar:

 $('.rbutton').on('click',function() { $(this).prop("disabled",true); }); 
   

Prueba este código:
HTML

  

función

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

Otra solución con jquery

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

MANIFESTACIÓN


Otra solución con javascript puro

   

DEMO2

Aquí hay dos cosas, y la respuesta más votada es técnicamente correcta según la pregunta de OP.

Brevemente resumido como:

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

Sin embargo, si usa jQuery UI (sé que el OP no lo era pero algunas personas podrían llegar aquí), mientras que esto desactivará los botones, haga clic en evento que no hará que el botón aparezca deshabilitado según el estilo de la interfaz de usuario.

Si está utilizando un botón estilo jQuery UI, debe habilitarlo / deshabilitarlo a través de:

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

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

Prueba esto

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

desactivar el botón:

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

botón de habilitar:

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

Simplemente funciona bien, en HTML:

  

En JQuery, ponga esta función para desactivar el botón:

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

Para el botón habilitar:

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

Eso es todo.

Esta es la forma más simple en mi opinión:

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

Así es como lo haces con 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 

Esto funciona para mí:

  

Quiero desactivar el botón en alguna condición, estoy usando la primera solución, pero no funcionará para mí. Pero cuando uso el segundo uno funcionó. A continuación, se muestran los resultados de la consola del navegador.

1. $ (‘# psl2 .btn-continue’). Prop (“deshabilitado”, verdadero)

 ​Next​ 

2. $ (‘# psl2 .btn-continue’). Attr (“deshabilitado”, “deshabilitado”)

 ​Next​ 

Para los botones de IU de Jquery, esto funciona:

 $("#buttonId").button( "option", "disabled", true | false );