Bootstrap Radio beim Klicken ändern

7

Ich bin sicher, was ich versuche, ist ziemlich einfach, aber ich brauche etwas Hilfe.

Ich habe drei Optionsfelder;

  • aktiv
  • inaktiv
  • nicht gefunden

Ich möchte die Klasse (Bootstrap v3) der Schaltflächen ändern, wenn sie angeklickt werden. Sie alle haben eine Standardklasse von btn-default . Aber wenn ich geklickt habe, möchte ich dann die folgenden Klassen haben:

  • aktiv ( btn-success )
  • inaktiv ( btn-warning )
  • nicht gefunden ( btn-danger )

Es sollte immer nur eine ausgewählt sein, und nur eine sollte gleichzeitig gefärbt sein.

Mein Code ist soweit unten, ich glaube, ich bin fast da. Wenn jemand einen Ratschlag anbieten könnte, wäre das großartig.

Hier ist ein Link zu meinem Beitrag .

%Vor% %Vor%
    
johnny_s 04.02.2016, 14:42
quelle

7 Antworten

6

Sie können stattdessen ein Klickereignis auf btn-default haben und nur einen Handler haben:

JSFiddle

%Vor% %Vor%
    
Rajesh 04.02.2016, 15:15
quelle
3

Der Code, den Sie haben, ändert die Klassen nicht, weil Sie auf die falschen Elemente abzielen. Bei den anderen Antworten wurde jedoch nicht berücksichtigt, dass nur jeweils einer farbig sein soll. Fügen Sie einfach die Klassen zum Entfernen hinzu und fügen Sie die Standardklassen zu den Änderungen hinzu. Versuchen Sie Folgendes:

%Vor%     
BroDev 04.02.2016 14:54
quelle
3

Als erstes sollten Sie bootstrap.js nach jquery.js einfügen Zweitens wählt Ihr Selektor das untergeordnete Element aus, aber Sie müssen die Klasse des übergeordneten Elements ändern. Sie müssen also parent() hier verwenden

Code-Ausschnitt unten:

%Vor% %Vor%
    
WinK- 04.02.2016 14:52
quelle
3
%Vor%

Entferne alle angewendeten Klassen, sobald dies erledigt ist, finde heraus, auf welche Schaltfläche geklickt wurde, und wende diese Option CSS an. Im Hinblick darauf, warum sich das CSS nicht änderte, zielte man nicht auf die Labels, in denen das btn- "Bootstrap-Button-Styling hier einfügen" angewendet wurde, durch Aufrufen von parent () ging man auf die Ebene, die das CSS kontrollierte.

Generalisieren Sie außerdem die Entfernung:

%Vor%     
Jordan Lowe 04.02.2016 15:05
quelle
3

Sie könnten Custom Data Attribute wie folgt verwenden

%Vor% %Vor%
    
Nenad Vracar 04.02.2016 16:25
quelle
1

Das Problem ist, dass Sie Ihren Change Event-Handler an die input binden, aber die <label> sind diejenigen, die mit btn-default formatiert sind.

Ändern Sie die Referenzen auf $(this) auf $(this).parent() und es wird wie vorgesehen funktionieren.

    
Angel Joseph Piscola 04.02.2016 14:54
quelle
1
  

Zweitens wählt Ihr Selektor das untergeordnete Element aus, aber Sie müssen die Klasse des übergeordneten Elements ändern. Du musst also parent () hier verwenden

Um nur eines zu aktivieren, müssen Sie die Klasse von einer anderen Schaltfläche entfernen. Das ist der Code

%Vor%

%Vor% %Vor%
    
Aroniaina 04.02.2016 15:05
quelle