it-swarm.com.de

Jquery/Bootstrap-Deaktivierungstaste

Hey, ich habe mit JQuery nach einer Lösung gesucht oder die Twitter-Bootstrap-Klasse geändert, um zu verhindern, dass eine Schaltfläche ihre Onclick-Aktion ausführt, dh sie deaktiviert. Die bisher gefundenen Ergebnisse iv sind jedoch nicht korrekt ausgeführt worden und zeigen meist nur den Anschein, dass sie deaktiviert sind, aber dennoch korrekt funktionieren:

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

Der Zweck besteht darin, das Wechseln von Registerkarten zu verhindern, wenn der Index der Registerkarte zu hoch oder zu niedrig ist. Die meisten anderen Lösungen scheinen große Mengen an scheinbar unnötigem Javascript für ein Feature zu enthalten, das relativ simpel erscheint.

Wie dieses:

$("#previous").click(function() {
  var me = $(this);
  me.unbind( "click");            
})

Was die gebundene Funktion entfernen soll, würde jedoch auch bedeuten, dass das Ereignis wieder hinzugefügt wird, wenn der Index der Registerkarte zunimmt. Gibt es eine einfachere Lösung, um eine Schaltfläche vorübergehend zu deaktivieren oder einfach zu verhindern, dass die Standardaktion ausgeführt wird, ohne das Ereignis zu entfernen oder das Schaltflächenelement nicht anzuzeigen?

Jede Hilfe wäre dankbar :)

6
D3181

Wenn Sie Twitter-Bootstrap verwenden, ist dieses Verhalten für Sie bereits implementiert.

Sie müssen nur die Klasse .disabled des Elements ändern, das Sie deaktivieren möchten.

Mögen:

$("#previous").addClass('disabled');
11
Erick Gallani

Lassen Sie mich ein einfaches Beispiel zeigen. Hier wird eine Schaltfläche deaktiviert, sobald Sie darauf klicken.

<button class="btn btn-danger">Click Me</button>

$('.btn-danger').on('click', function() {

    if ($(this).hasClass('disabled')) {
        return false;
    } else {
        $(this).addClass('disabled');
    }
});
3

Sie müssten die Standardaktion mit event.preventDefault() verhindern.

$("#previous").click(function(event) {
  //add logic to attach style behavior here or conditionally prevent default
      event.preventDefault();    
});
1
Shintu Joseph

Hier ist meine Lösung:

Javascript

jQuery.fn.extend( {

    bsButtonSetStatus : function( status ) {
        if ( status ) {
            this.removeClass( 'disabled' );
        } else {
            this.addClass( 'disabled' );
        }
    },

} );

CSS

.btn.disabled,
.btn:disabled {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
    opacity: 0.25;
    pointer-events: none;
}
0