Deshabilitar botón en jQuery


359

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

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

En Javascript

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

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


66
'rbutton _ "+ i +"' no es una identificación válida.
Diodeus - James MacFarlane

¿Cómo puedo especificar la identificación? Se está creando en mi javascript dentro de un bucle for.
user2047817

¿Qué tal crear un jsFiddle para que podamos ver lo que estás haciendo?
j08691

55
Probablemente quieras disable(this)yfunction disable(elem) { $(elem).attr("disabled","disabled") }
JJJ

2
jQuery puede direccionar elementos utilizando su número de índice, por lo que si lo hace correctamente, es posible que ni siquiera necesite ID. Puede pasar deshabilitar (esto) como referencia propia.
Diodeus - James MacFarlane

Respuestas:


638

Use en su .proplugar (y limpie su cadena de selección):

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

HTML generado:

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

Pero el enfoque de "mejores prácticas" es utilizar el enlace de eventos de JavaScript y en su thislugar:

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


Aquí hay un pequeño violín que creé. Por favor, déjame lo que estoy haciendo mal. jsfiddle.net/2Nfu4/3
usuario2047817

OKAY. Funcionó en No Wrap - in Head..Pero ¿puedo preguntar por qué? Puede ser que esto sea algo similar, ¡no estoy haciendo esto en mi código real!
usuario2047817

Según parece, jsFiddle lo configuró: puede "inspeccionar el elemento" en su navegador si desea analizar exactamente lo que está sucediendo.
Blazemonger

1
Esto funciona bien Solo asegúrese de que si está utilizando ajax, habilite el botón en los casos de éxito y error. No al final de la llamada ajax. Porque entonces se habilitará inmediatamente y no verá la desactivación en absoluto.
user890332

Con jQuery 1.10.2 funciona en IE 11, pero no en Chrome Versión 39.0.2171.95 m. Sospechosamente, el violín utilizado para esta respuesta no ofrece jQuery 1.10.2
Alex

35

Prueba este código:
HTML

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

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

<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


La segunda función .click () funciona perfectamente en su demo. Pero tengo que usar el método separado como se menciona en su primera solución, pero no funciona. ¿Puedes ayudarme?
usuario2047817

Se agregó una tercera solución con javascript puro @ user2047817
Alessandro Minoccheri

29

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

Brevemente resumido como:

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

Sin embargo, si está utilizando jQuery UI (sé que el OP no estaba pero algunas personas que llegan aquí podrían estarlo), entonces, aunque esto deshabilitará el evento de clic de botones, no hará que el botón parezca deshabilitado según el estilo de la IU.

Si está utilizando un botón de estilo jQuery UI, entonces debe habilitarse / deshabilitarse mediante:

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

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


27

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
);
<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
Muy buen señor. Esto funcionó totalmente, incluso con botones de arranque.
Steve Moretz

25

Prueba esto

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

15

botón de deshabilitar:

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

botón de habilitar:

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

13

Simplemente funciona bien, en HTML:

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

En el lado de JQuery, ponga esta función para deshabilitar el botón:

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

Para habilitar el botón:

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

Eso es todo.


3

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

en algunas versiones de jQuery, debe usar .attr('disabled', true). No sé cuál, pero la versión que tengo que usar (minificada y agrupada como parte de la aplicación en la que estoy trabajando) apareceobject does not support prop
JoeBrockhaus

2

Esto funciona para mi:

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

2

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

1. $ ('# psl2 .btn-continue'). Prop ("deshabilitado", verdadero)

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

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

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

0

Para los botones de Jquery UI esto funciona:

$("#buttonId").button( "option", "disabled", true | false );
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.