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

No puedo pensar en 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 desactivar la etiqueta de anclaje:

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

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"/>

Desactivación:

Para desactivar cualquier botón, por ejemplo, enviar botón solo tiene que agregar deshabilitado atributo como,

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

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

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

Observe que el atributo' disabled ' ha agregado .

Habilitando:

Para habilitar el botón, como cuando tiene algo de texto en el campo de texto. Usted tendrá que quitar el deshabilitar el atributo para habilitar el botón como,

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

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

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

"Solo quiero desactivar clicky-cosas específicas para que:

• Dejan de hacer clic
• Parecen discapacitados

¿Qué tan difícil puede ser esto?"

Dejan de hacer clic

1.  Para botones como <button> o <input type="button"> se añade el atributo: disabled.

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

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

.selector { pointer-events:none; }

El soporte del navegador para eventos de puntero es impresionante por el estado actual del arte (5/12/14). Pero por lo general tenemos que soportar navegadores heredados en el reino de IE, por lo que IE10 y por debajo NO soportan eventos de puntero: http://caniuse.com/pointer-events . Así que el uso de 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 pointer eventos:

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

Parecen 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.

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

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

@James Donnelly ha proporcionado una respuesta completa 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 de la manera que lo necesito.

JQuery es un juego de palabras.]}

$.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)

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

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

Tenga en cuenta que hay un problema extraño si está utilizando los botones JS de Bootstrap y el estado 'loading'. No se porque sucede esto, pero aqui esta como arreglarlo.

Digamos que tienes un botón y lo pones en el estado de carga:

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

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

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

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

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

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

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

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 funcionando para mí. Gracias a todos!

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

Define la etiqueta dentro de HTML:

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

Use jQuery para inicializar los botones:

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

Use los métodos del widget button para deshabilitarlos/habilitarlos:

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

Eso se encargará del comportamiento del botón y el cursor, pero si necesita profundizar y cambiar el estilo del botón cuando esté deshabilitado, entonces sobrescriba las siguientes clases CSS dentro del estilo CSS de su página file.

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

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

Lo siguiente me ha funcionado muy bien:

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

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

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

Solo incluye el css y js necesarios, agrega algunas propiedades a tus botones y habilita lada con javascript... ¡Presto ! Sus botones tienen una nueva vida (por favor, compruebe la demo para ver lo hermoso que es) !

Esto anterior no funciona porque a veces

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

Ajuste su código con

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

Sé que mi respuesta es tardía, pero IMO esta es la forma más fácil de alternar 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;
  }
}

Supongamos que tienes 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");
    }
}

Digamos que tienes que se parece a esto que está actualmente activado.

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

Solo agrega esto:

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

Y obtendrá esto que desactivará el botón

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