1

Los botones los genero mediante ajax

 $(data).each(function(i, v) {
   $("#containerfpagos").append('<button type="submit"  data-id="' + v.id_fpago + '"style="margin:1rem" class="btn btn-primary shadow-button" name="fpago" id="fpago"><div class="info"><h3>' + v.descrip_fpago + '</h3></div></button>');
  })

Tengo esta función: aquí es donde quiero que, si yo doy un clic al botón, este tome la propiedad disabled, y cuando dé clic a otro botón, este tome la propiedad disabled y que al otro que está disabled se le quite la propiedad (los botones los genero dinámicamente, la única diferencia entre ellos es el data-id).

$('body').on('click', '#fpago', function(e) {
        e.preventDefault();
        var id = $(this).data("id");
        if (this.disabled) {
            $(this).prop('disabled', false);
        } else {
            $(this).prop('disabled', true);
        }

2 respuestas 2

1

Recuerda que no pueden existir dos elementos con un mismo ID, eso deberás corregirlo. Para el problema, lo que te recomiendo hacer es usar una misma clase CSS para todos los botones (una auxiliar para el caso), poner un evento onlclick para esa clase y deshabilitar todos los botones. Y por último habilitas el que fue clickeado (this). Algo así:

$(".btn-aux").prop('disabled', true);
$(this).prop('disabled', false);
1
  • Excelente, muchas gracias. Commented el 6 jul. 2021 a las 18:41
0

Como dice Trekkium, los identificadores deben ser únicos en la pagina (para referencia mira este enlace), por ende usar clases es la manera más adecuada.

Si quieres hacerlo con Javascript plano puedes hacerlo así:

const htmlElements = document.querySelectorAll('.clase'); 
/* o para id puedes usar:
const htmlElements = document.querySelectorAll('#identificador'); 
*/
htmlElements.forEach(elemento => elemento.disabled = true);

Tenga en cuenta que htmlElements es una variable de tipo NodeList, es decir, si quiere usar funciones de Arrays como map o reduce debe primero transformarla en arreglo, así:

const items = Array.from(htmlElements);
items.map(/* ... */);
items.reduce(/* ... */);

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.