Skip to main content
4 de 4
se añadieron 160 caracteres en el cuerpo

Como puedo mandar un mensaje al hacer click en un boton disabled

no puedo mostrar el mensaje de alerta al hacer click en la opcion deshabilitada. Ya intente varias formas con onclick, click, attr pero no funcionan.

No se si hay otra forma de solucionarlo o no se sino sea con el id sino con la clase.

La libreria que utilizo es Select2 para crear el combobox multiple.

$(document).ready(function(){

   //select2 dropdown
   $('.js-example-basic-multiple').select2();
    var indiceOpcionBloqueada = 1;
    var indiceOpcionBloqueada2 = 2;

    //  seleciona la opción del indiceOpcionBloqueada
 $("#cars").find("option").eq(indiceOpcionBloqueada).prop("selected", true);
 $("#cars").find("option").eq(indiceOpcionBloqueada2).prop("selected", true);

// Deshabilita la opción del indiceOpcionBloqueada
 $("#cars").find("option").eq(indiceOpcionBloqueada).prop("disabled", true);
 $("#cars").find("option").eq(indiceOpcionBloqueada2).prop("disabled", true);
    
    // Deshabilita el boton de x del opción en Select2
    $("#cars").select2({
            templateSelection: function (data, container) {
                // Verifica si la opción está deshabilitada
                if (data.disabled) {
                    // Deshabilita el botón de eliminación (x)
                    $(container).find(".select2-selection__choice__remove").addClass("disabled");
                }
                return data.text;
            }
        });
        
     //Boton click para mostrar mensaje   
     $(".select2-selection__choice__remove").on("click", function(){
   alert("The paragraph was clicked.");
});
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js">
</script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
</head>
<body>

<select name="cars" id="cars" class="js-example-basic-multiple" multiple>
    <option value="1">Volvo</option>
    <option value="2">Saab</option>
    <option value="3">Opel</option>
    <option value="4">Audi</option>
  </select>
</body>
</html>

introducir la descripción de la imagen aquí

Ya logre mostrar el mensaje pero solo a una opcion seleccionada al darle click en la x, pero al darle click de nuevo a otra opcion seleccionada no funciona.