¿Cuál es la forma más fácil de deshabilitar/habilitar botones y enlaces(jQuery+Bootstrap)

deshabilitar boton jquery

Question

Algunas veces uso anclajes con estilo de botones y otras veces solo uso botones. Quiero deshabilitar clicky-things específicos para que:

• Se ven discapacitados
• Dejan de ser pinchados

¿Cómo puedo hacer esto?

Answer 1

Botones

Los botones son fáciles de deshabilitar ya que disabled es una propiedad del botón que maneja el navegador:

<input type="submit" class="btn" value="My Input Submit" disabled/>
<input type="button" class="btn" value="My Input Button" disabled/>
<button class="btn" disabled>My Button</button>

Para deshabilitarlos con una función jQuery personalizada, simplemente debe utilizar fn.extend() :

// Disable function
jQuery.fn.extend({
    disable: function(state) {
        return this.each(function() {
            this.disabled = state;
        });
    }
});

// Disabled with:
$(''input[type="submit"], input[type="button"], button'').disable(true);

// Enabled with:
$(''input[type="submit"], input[type="button"], button'').disable(false);

Botón deshabilitado JSFiddle y entrada de demostración .

De lo contrario, utilizarías el método prop() de jQuery:

$(''button'').prop(''disabled'', true);
$(''button'').prop(''disabled'', false);

Etiquetas de anclaje

Vale la pena señalar que disabled no es una propiedad válida para las etiquetas de anclaje. Por esta razón, Bootstrap utiliza el siguiente estilo en sus elementos .btn :

.btn.disabled, .btn[disabled] {
    cursor: default;
    background-image: none;
    opacity: 0.65;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    color: #333;
    background-color: #E6E6E6;
}

Observe cómo la propiedad [disabled] está orientada, así como una clase .disabled . La clase .disabled es lo que se necesita para hacer que una etiqueta de ancla aparezca deshabilitada.

<a href="http://example.com" class="btn">My Link</a>

Por supuesto, esto no impedirá que los enlaces funcionen cuando se hace clic. El enlace de arriba nos llevará a http://example.com . Para evitar esto, podemos agregar una pieza simple de código jQuery para dirigir las etiquetas de anclaje con la clase disabled para llamar a event.preventDefault() :

$(''body'').on(''click'', ''a.disabled'', function(event) {
    event.preventDefault();
});

Podemos cambiar la clase disabled usando toggleClass() :

jQuery.fn.extend({
    disable: function(state) {
        return this.each(function() {
            var $this = $(this);
            $this.toggleClass(''disabled'', state);
        });
    }
});

// Disabled with:
$(''a'').disable(true);

// Enabled with:
$(''a'').disable(false);

JSFiddle enlace demo deshabilitado .

Conjunto

Luego podemos extender la función de inhabilitación anterior hecha anteriormente para verificar el tipo de elemento que estamos intentando deshabilitar usando is() . De esta manera podemos toggleClass() si no es un elemento de input o button , o cambiar la propiedad disabled si es:

// Extended disable function
jQuery.fn.extend({
    disable: function(state) {
        return this.each(function() {
            var $this = $(this);
            if($this.is(''input, button, textarea, select''))
              this.disabled = state;
            else
              $this.toggleClass(''disabled'', state);
        });
    }
});

// Disabled on all:
$(''input, button, a'').disable(true);

// Enabled on all:
$(''input, button, a'').disable(false);

Demostración completa combinada de JSFiddle .

Vale la pena señalar que la función anterior también funcionará en todos los tipos de entrada.

Answer 2

@James Donnelly ha proporcionado una respuesta integral que se basa en extender jQuery con una nueva función. Esa es una gran idea, así que voy a adaptar su código para que funcione como lo necesito.

Extendiendo jQuery

$.fn.disable=-> setState $(@), true
$.fn.enable =-> setState $(@), false
$.fn.isDisabled =-> $(@).hasClass ''disabled''

setState=($el, state) ->
    $el.each ->
        $(@).prop(''disabled'', state) if $(@).is ''button, input''
        if state then $(@).addClass(''disabled'') else $(@).removeClass(''disabled'')

    $(''body'').on(''click'', ''a.disabled'', -> false)

Uso

$(''.btn-stateful'').disable()
$(''#my-anchor'').enable()

El código procesará un solo elemento o una lista de elementos.

Los botones y las entradas admiten la propiedad disabled y, si se establecen en true , se verán deshabilitados (gracias a bootstrap) y no se activarán cuando se haga clic en ellos.

Los anclajes no admiten la propiedad deshabilitada, por lo que vamos a confiar en la clase .disabled para que se vean deshabilitados (gracias a Bootstrap nuevamente) y conectamos un evento de clic predeterminado que evita el clic devolviendo el falso (no es necesario preventDefault ver here ).

Nota : no es necesario desconectar este evento al volver a habilitar los anclajes. Simplemente eliminando la clase .disabled hace el truco.

Por supuesto, esto no ayuda si ha adjuntado un controlador de clic personalizado al enlace, algo que es muy común al usar bootstrap y jQuery. Entonces, para lidiar con esto, vamos a usar la extensión isDisabled() para probar la clase .disabled , como esto:

$(''#my-anchor'').click -> 
    return false if $(@).isDisabled()
    # do something useful

Espero que eso ayude a simplificar un poco las cosas.

Answer 3

Digamos que tienes un aspecto como este que está habilitado actualmente.

<button id="btnSave" class="btn btn-info">Save</button>

Solo agrega esto:

$("#btnSave").prop(''disabled'', true);

y obtendrá este que deshabilitará el botón

<button id="btnSave" class="btn btn-primary" disabled>Save</button>

Answer 4

Esta es una respuesta bastante tardía, sin embargo, me topé con esta pregunta mientras buscaba una manera de deshabilitar los botones de refuerzo después de hacer clic en ellos y tal vez agregar un buen efecto (fe a spinner). He encontrado una gran biblioteca que hace exactamente eso:

http://msurguy.github.io/ladda-bootstrap/

Simplemente incluya los css y js requeridos, agregue algunas propiedades a sus botones y habilite lada con javascript ... ¡Presto! ¡Sus botones tienen una nueva vida (compruebe la demostración para ver qué hermoso es)!

Answer 5

Gran respuesta y contribuciones de todos! Tuve que extender esta función ligeramente para incluir la desactivación de elementos seleccionados:

jQuery.fn.extend({
disable: function (state) {
    return this.each(function () {
        var $this = jQuery(this);
        if ($this.is(''input, button''))
            this.disabled = state;
        else if ($this.is(''select'') && state)
            $this.attr(''disabled'', ''disabled'');
        else if ($this.is(''select'') && !state)
            $this.removeAttr(''disabled'');
        else
            $this.toggleClass(''disabled'', state);
    });
}});

Parece estar trabajando para mí. ¡Gracias a todos!

Answer 6

Lo anterior no funciona porque a veces

$(this).attr(''checked'') == undefined

ajusta tu código con

if(!$(this).attr(''checked'') || $(this).attr(''checked'') == false){

Answer 7

Lo siguiente me ha funcionado muy bien:

$("#button").attr(''disabled'', ''disabled'');

Answer 8

No puedo pensar de una manera más simple / más fácil! ;-)

Usando etiquetas de anclaje (enlaces):

<a href="#delete-modal" class="btn btn-danger" id="delete">Delete</a>

Para habilitar la etiqueta de anclaje:

 $(''#delete'').removeClass(''disabled'');
 $(''#delete'').attr("data-toggle", "modal");

Para deshabilitar la etiqueta de anclaje:

 $(''#delete'').addClass(''disabled'');
 $(''#delete'').removeAttr(''data-toggle'');

Answer 9

Para ese tipo de comportamiento siempre uso el widget del button jQueryUI, lo uso para enlaces y botones.

Defina la etiqueta dentro de HTML:

<button id="sampleButton">Sample Button</button>
<a id="linkButton" href="yourHttpReferenceHere">Link Button</a>

Usa jQuery para inicializar los botones:

$("#sampleButton").button();
$("#linkButton").button();

Utilice los métodos de widget de button para deshabilitarlos / habilitarlos:

$("#sampleButton").button("enable"); //enable the button
$("#linkButton").button("disable"); //disable the button

Se encargará del comportamiento del botón y del cursor, pero si necesita profundizar y cambiar el estilo del botón cuando está deshabilitado, sobrescriba las siguientes clases de CSS en el archivo de estilo CSS de su página.

.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
      background-color:aqua;
      color:black;
 }

Pero recuerde: esas clases de CSS (si se modifican) también cambiarán el estilo de otros widgets.

Answer 10

Sé que llego tarde a la fiesta, pero para responder específicamente a las dos preguntas:

"Solo quiero deshabilitar clicky-things específicos para que:

• Dejan de hacer clic
• Se ven discapacitados

¿Qué tan difícil puede ser esto?

Dejan de hacer clic

1. Para botones como <button> o <input type="button"> usted agrega el atributo: disabled .

<button type="submit" disabled>Register</button>
<input type="button" value="Register" disabled>

2. Para los enlaces, CUALQUIER enlace ... en realidad, cualquier elemento HTML, puede usar eventos de puntero CSS3.

.selector { pointer-events:none; }

El soporte del navegador para eventos de puntero es impresionante por el estado de la técnica actual (5/12/14). Pero generalmente tenemos que admitir navegadores heredados en el reino de IE, por lo que IE10 y anteriores NO admiten eventos de puntero: http://caniuse.com/pointer-events . Por lo tanto, usar una de las soluciones de JavaScript mencionadas por otros aquí puede ser el camino a seguir para los navegadores heredados.

Más información sobre eventos punteros:

• https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
• http://wiki.csswg.org/spec/css4-ui#pointer-events

Se ven discapacitados

Obviamente esta es una respuesta CSS, así que:

1. Para botones como <button> o <input type="button"> use el selector [attribute] :

button[disabled] { ... }

input[type=button][disabled] { ... }

-

Aquí hay una demostración básica con las cosas que mencioné aquí: http://jsfiddle.net/bXm5B/4/

Espero que esto ayude.

Answer 11

Sé que mi respuesta es tardía, pero IMO, esta es la forma más fácil de cambiar un botón ''habilitar'' y el botón ''deshabilitar''

function toggleButtonState(button){

  //If button is enabled, -> Disable
  if (button.disabled === false) {
    button.disabled = true;

  //If button is disabled, -> Enable
  } else if (button.disabled === true) {
    button.disabled = false;
  }
}

Answer 12

Si, como yo, solo quieres deshabilitar un botón, no te pierdas la respuesta simple sutilmente oculta en este largo hilo:

 $("#button").prop(''disabled'', true);

Answer 13

Supongamos que tiene estos botones en la página como:

<input type="submit" class="byBtn" disabled="disabled" value="Change"/>
<input type="submit" class="byBtn" disabled="disabled" value="Change"/>
<input type="submit" class="byBtn" disabled="disabled" value="Change"/>
<input type="submit" class="byBtn" disabled="disabled" value="Change"/>
<input type="submit" class="byBtn" disabled="disabled" value="Change"/>
<input type="submit"value="Enable All" onclick="change()"/>

El código js:

function change(){
   var toenable = document.querySelectorAll(".byBtn");        
    for (var k in toenable){
         toenable[k].removeAttribute("disabled");
    }
}

Answer 14

Supongamos que tiene un campo de texto y un botón de envío,

<input type="text" id="text-field" />
<input type="submit" class="btn" value="Submit"/>

Desactivar:

Para deshabilitar cualquier botón, por ejemplo, enviar botón, solo necesita agregar el atributo deshabilitado como,

$(''input[type="submit"]'').attr(''disabled'',''disabled'');

Después de ejecutar la línea anterior, la etiqueta html del botón de envío se vería así:

<input type="submit" class="btn" value="Submit" disabled/>

Note que el atributo ''deshabilitado'' ha agregado .

Habilitación:

Para habilitar el botón, como cuando tienes texto en el campo de texto. Deberá eliminar el atributo deshabilitar para habilitar el botón ya que,

 if ($(''#text-field'').val() != '''') {
     $(''input[type="submit"]'').removeAttr(''disabled'');
 }

Ahora el código anterior eliminará el atributo ''deshabilitado''.

Answer 15

Tenga en cuenta que existe un problema extraño si utiliza los botones JS de Bootstrap y el estado de "carga". No sé por qué sucede esto, pero aquí hay cómo solucionarlo.

Digamos que tienes un botón y lo configuras al estado de carga:

var myButton = $(''#myBootstrapButton'');
myButton.button(''loading'');

Ahora quiere sacarlo del estado de carga, pero también deshabilitarlo (por ejemplo, el botón era un botón Guardar, el estado de carga indicó una validación en curso y la validación falló). Esto parece razonable Bootstrap JS:

myButton.button(''reset'').prop(''disabled'', true); // DOES NOT WORK

Desafortunadamente, eso restablecerá el botón, pero no lo deshabilitará. Al parecer, el button() realiza alguna tarea retrasada. Así que también tendrás que posponer tu inhabilitación:

myButton.button(''reset'');
setTimeout(function() { myButton.prop(''disabled'', true); }, 0);

Un poco molesto, pero es un patrón que estoy usando mucho.