javascript - eventos - ¿Cómo deshabilitar un botón de enlace en jQuery Mobile?

eventos tabs jquery

Question

Tengo un sitio web jQuery Mobile Beta 1 con el botón de enlace jQuery 1.6.1 como este:

<a id="subselection" href="#" data-role="button" data-theme="b">TEST</a>

Y en document.ready configuré el evento click:

$(''#subselection'').livequery("click", function(){
  alert(''test'');
});

Quise desactivar este "botón de enlace" y lo intenté

$(''#subselection'').button(''disable'')

Y ese comando establece el estilo del botón como si estuviera deshabilitado, pero el evento click funciona.

También he intentado

$(''#subselection'').prop(''disabled'', true);

y $ (''# subselection''). prop (''disabled''); da verdadero, pero no está deshabilitado.

Alguien tiene una buena idea.

Answer 1

Alternativamente, simplemente puede usar la etiqueta / widget del <button>TEST</button> directamente <button>TEST</button> que tiene la deshabilitación adecuada. Si solo lo está usando para atrapar un evento y ejecutar JavaScript, no está seguro de la ventaja que tendría al usar un enlace.

Answer 2

Ejemplo de botón de enlace:

• http://jsfiddle.net/gRLYQ/6/

JS

var clicked = false;

$(''#myButton'').click(function() {
    if(clicked === false) {
        $(this).addClass(''ui-disabled'');
        clicked = true;
        alert(''Button is now disabled'');
    } 
});

$(''#enableButton'').click(function() {
    $(''#myButton'').removeClass(''ui-disabled'');
    clicked = false; 
});

HTML

<div data-role="page" id="home">
    <div data-role="content">

        <a href="#" data-role="button" id="myButton">Click button</a>
        <a href="#" data-role="button" id="enableButton">Enable button</a>

    </div>
</div>

NOTA: - http://jquerymobile.com/demos/1.0rc2/docs/buttons/buttons-types.html

Los enlaces con el mismo estilo que los botones tienen todas las mismas opciones visuales que los botones verdaderos basados ​​en formularios a continuación, pero hay algunas diferencias importantes. Los botones basados ​​en enlaces no son parte del complemento de botones y solo usan el complemento buttonMarkup subyacente para generar los estilos de botones, por lo que los métodos del botón de formulario (habilitar, deshabilitar, actualizar) no son compatibles. Si necesita deshabilitar un botón basado en enlace (o cualquier elemento), es posible aplicar la clase deshabilitada ui-disabled con JavaScript para lograr el mismo efecto.

Answer 3

El elemento a no tiene una propiedad disabled . Por lo tanto, definir uno no afectará a los controladores de eventos que pueda haber adjuntado.

ejemplo: http://jsfiddle.net/niklasvh/n2eYS/

Para obtener una lista de atributos disponibles, eche un vistazo a la referencia de HTML 5 .

Para resolver su problema, podría, por ejemplo, asignar el disabled como data en el elemento:

$(''#subselection'').data(''disabled'',true);

y luego en su evento, compruebe si está configurado:

if (!$(this).data(''disabled''))

ejemplo: http://jsfiddle.net/niklasvh/n2eYS/5/

Answer 4

No hay necesidad de jquery / javascript en este caso. Simplemente agrega una clase ''ui-disabled''.

Como por ejemplo:

<a class="ui-disabled" id="subselection" href="#" data-role="button" data-theme="b">TEST</a>

Eso es lo que hago, y funciona para mí;)

Answer 5

Sé que ya hay una respuesta aceptada para esto, pero creo que esta respuesta es mucho más fácil de entender. Simplemente haga que la función de clic devuelva falso.

<a id="subselection" href="#" data-role="button" data-theme="b">TEST</a>

<script>
$(''#subselection'').click(function() {
    alert("do some code here");
    return false;
});
</script>

Answer 6

intenta usar

$(''#subselection'').button().button(''disable''); //disable in JQM

$(''#subselection'').button().button(''enable''); //enable in JQM

esto parece funcionar visualmente para mostrar un estilo de deshabilitar / habilitar ... SIN EMBARGO, el "botón" aún se puede hacer clic (¡así que cuidado !: P)